SASS - How can I assign two classes the same style except one property?





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















I have a SASS stylesheet and I want to assign the same styles for two classes (.class and .otherclass) except for one property (before:) which should have another value for .otherclass.



This is the code I currently have:



.class, .otherclass {



    p { font-family:arial;

         &before: 

              @extend .class-one {}

    }



    ~ .extraclass {}

}


Thanks






css sass styles







share|improve this question




















  • 1





    You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.

    – Paulie_D
    Jan 4 at 12:17






  • 1





    Also your existing code does not reflect your description of the required result.

    – Paulie_D
    Jan 4 at 12:18


















1















I have a SASS stylesheet and I want to assign the same styles for two classes (.class and .otherclass) except for one property (before:) which should have another value for .otherclass.



This is the code I currently have:



.class, .otherclass {



    p { font-family:arial;

         &before: 

              @extend .class-one {}

    }



    ~ .extraclass {}

}


Thanks






css sass styles







share|improve this question




















  • 1





    You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.

    – Paulie_D
    Jan 4 at 12:17






  • 1





    Also your existing code does not reflect your description of the required result.

    – Paulie_D
    Jan 4 at 12:18














1












1








1








I have a SASS stylesheet and I want to assign the same styles for two classes (.class and .otherclass) except for one property (before:) which should have another value for .otherclass.



This is the code I currently have:



.class, .otherclass {



    p { font-family:arial;

         &before: 

              @extend .class-one {}

    }



    ~ .extraclass {}

}


Thanks






css sass styles







share|improve this question
















I have a SASS stylesheet and I want to assign the same styles for two classes (.class and .otherclass) except for one property (before:) which should have another value for .otherclass.



This is the code I currently have:



.class, .otherclass {



    p { font-family:arial;

         &before: 

              @extend .class-one {}

    }



    ~ .extraclass {}

}


Thanks






css sass styles




css sass styles






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 4 at 12:48









Turnip

29.1k116796




29.1k116796










asked Jan 4 at 12:08









MarMar

10115




10115








  • 1





    You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.

    – Paulie_D
    Jan 4 at 12:17






  • 1





    Also your existing code does not reflect your description of the required result.

    – Paulie_D
    Jan 4 at 12:18














  • 1





    You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.

    – Paulie_D
    Jan 4 at 12:17






  • 1





    Also your existing code does not reflect your description of the required result.

    – Paulie_D
    Jan 4 at 12:18








1




1





You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.

– Paulie_D
Jan 4 at 12:17





You can't except to reset that property. If you want to exclude a property from an extend, don't include it in the original definition.

– Paulie_D
Jan 4 at 12:17




1




1





Also your existing code does not reflect your description of the required result.

– Paulie_D
Jan 4 at 12:18





Also your existing code does not reflect your description of the required result.

– Paulie_D
Jan 4 at 12:18












2 Answers
2






active

oldest

votes


















4














To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g 






.class1, .class2, .class3 {

  

  &:before{

    content: 'class';

  }

}



.class2:before {

  content: 'class2';

}





Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp






.class1, .class2, .class3 {

  &:before {

    content: 'class'

  }

  &:not(.class1):before{

    content: 'class23'

  }

}








share|improve this answer
























  • Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.

    – Mar
    Jan 4 at 17:01






  • 1





    Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)

    – Andreew4x4
    Jan 9 at 9:03



















0














Please try to look like:



.test{

  $color:#f00;

}

.demo{

  &:extend(.test);

}





share|improve this answer


























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54038700%2fsass-how-can-i-assign-two-classes-the-same-style-except-one-property%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    4














    To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g 






    .class1, .class2, .class3 {
    
  
    
  &:before{
    
    content: 'class';
    
  }
    
}
    

    
.class2:before {
    
  content: 'class2';
    
}





    Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp






    .class1, .class2, .class3 {
    
  &:before {
    
    content: 'class'
    
  }
    
  &:not(.class1):before{
    
    content: 'class23'
    
  }
    
}








    share|improve this answer
























    • Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.

      – Mar
      Jan 4 at 17:01






    • 1





      Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)

      – Andreew4x4
      Jan 9 at 9:03
















    4














    To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g 






    .class1, .class2, .class3 {
    
  
    
  &:before{
    
    content: 'class';
    
  }
    
}
    

    
.class2:before {
    
  content: 'class2';
    
}





    Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp






    .class1, .class2, .class3 {
    
  &:before {
    
    content: 'class'
    
  }
    
  &:not(.class1):before{
    
    content: 'class23'
    
  }
    
}








    share|improve this answer
























    • Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.

      – Mar
      Jan 4 at 17:01






    • 1





      Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)

      – Andreew4x4
      Jan 9 at 9:03














    4












    4








    4







    To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g 






    .class1, .class2, .class3 {
    
  
    
  &:before{
    
    content: 'class';
    
  }
    
}
    

    
.class2:before {
    
  content: 'class2';
    
}





    Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp






    .class1, .class2, .class3 {
    
  &:before {
    
    content: 'class'
    
  }
    
  &:not(.class1):before{
    
    content: 'class23'
    
  }
    
}








    share|improve this answer













    To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g 






    .class1, .class2, .class3 {
    
  
    
  &:before{
    
    content: 'class';
    
  }
    
}
    

    
.class2:before {
    
  content: 'class2';
    
}





    Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp






    .class1, .class2, .class3 {
    
  &:before {
    
    content: 'class'
    
  }
    
  &:not(.class1):before{
    
    content: 'class23'
    
  }
    
}








    .class1, .class2, .class3 {
    
  
    
  &:before{
    
    content: 'class';
    
  }
    
}
    

    
.class2:before {
    
  content: 'class2';
    
}





    .class1, .class2, .class3 {
    
  
    
  &:before{
    
    content: 'class';
    
  }
    
}
    

    
.class2:before {
    
  content: 'class2';
    
}





    .class1, .class2, .class3 {
    
  &:before {
    
    content: 'class'
    
  }
    
  &:not(.class1):before{
    
    content: 'class23'
    
  }
    
}





    .class1, .class2, .class3 {
    
  &:before {
    
    content: 'class'
    
  }
    
  &:not(.class1):before{
    
    content: 'class23'
    
  }
    
}






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Jan 4 at 13:51









    Andreew4x4Andreew4x4

    197112




    197112













    • Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.

      – Mar
      Jan 4 at 17:01






    • 1





      Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)

      – Andreew4x4
      Jan 9 at 9:03



















    • Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.

      – Mar
      Jan 4 at 17:01






    • 1





      Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)

      – Andreew4x4
      Jan 9 at 9:03

















    Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.

    – Mar
    Jan 4 at 17:01





    Thank you, I though overriding was ideal with CSS but as I know little SASS I'd though I should ask.

    – Mar
    Jan 4 at 17:01




    1




    1





    Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)

    – Andreew4x4
    Jan 9 at 9:03





    Sass, Less and Stylus are just preprocessors of CSS. There is no reason to drop CSS properties when using SCSS. Pure CSS code is valid SCSS code :)

    – Andreew4x4
    Jan 9 at 9:03













    0














    Please try to look like:



    .test{
    
  $color:#f00;
    
}
    
.demo{
    
  &:extend(.test);
    
}





    share|improve this answer






























      0














      Please try to look like:



      .test{
      
  $color:#f00;
      
}
      
.demo{
      
  &:extend(.test);
      
}





      share|improve this answer




























        0












        0








        0







        Please try to look like:



        .test{
        
  $color:#f00;
        
}
        
.demo{
        
  &:extend(.test);
        
}





        share|improve this answer















        Please try to look like:



        .test{
        
  $color:#f00;
        
}
        
.demo{
        
  &:extend(.test);
        
}






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Jan 6 at 11:22

























        answered Jan 4 at 12:57









        Tushar KumawatTushar Kumawat

        360411




        360411






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54038700%2fsass-how-can-i-assign-two-classes-the-same-style-except-one-property%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            Monofisismo

            Image
            Monofisismo (do grego: monos - "único, singular" e physis - "natureza") é o ponto de vista cristológico que defende que, depois da união do divino e do humano na encarnação histórica, Jesus Cristo, como encarnação do Filho ou Verbo ( Logos ) de Deus, teria apenas uma única "natureza", a divina, e não uma síntese de ambas. O monofisismo é contraposto pelo diofisismo (ou "diafisismo"), que defende que Jesus preservou em si as duas naturezas. Historicamente, o monofisismo se refere primordialmente à posição dos que (especialmente no Egito e, em menor grau, na Síria) rejeitaram as decisões do Concílio de Calcedônia em 451 (o quarto concílio ecumênico). Os membros mais moderados entre eles, porém, defendem a teologia "miafisita", que se tornou a oficial para as Igrejas Ortodoxas Orientais. Muitos ortodoxos orientais, porém, rejeitam essa classificação, mesmo como um termo genérico, mas ele é amplamente utilizado na literatura históri...
            Read more

            Angular Downloading a file using contenturl with Basic Authentication

            Image
            0 I have a contentUrl when user clicks on that,file should be downloaded. If I try to browse the contentUrl in the browser it asks for Userid and password.I believe this is Basic Authentication.I dont want user to enter UserId and Password so I am passing it Authorization(Please see below code). Url looks some thing like this: http://XXX.XXX.XX.XXX:8080/flowable-rest/service/runtime/tasks/90875/attachments/90555/content let username : string = 'admin'; let pwd : string = 'test'; let headers = new Headers(); headers.set('Accept', 'text/json'); headers.append('Content-Type', 'application/json'); headers.set('Access-Control-Allow-Origin', '*'); headers.set('Access-Control-Allow-Methods','POST, GET, OPTIONS, PUT, DELETE'); head...
            Read more

            Olmecas

            Image
            Monumento 1, uma das quatro cabeças colossais encontradas em La Venta, com altura aproximada de 3 metros Olmecas é a designação do povo e da civilização que estiveram na origem da antiga cultura pré-colombiana da Mesoamérica e que se desenvolveram nas regiões tropicais do centro-sul do atual México durante o pré-clássico, próximo de onde hoje estão localizados os estados mexicanos de Veracruz e Tabasco, no Istmo de Tehuantepec, numa zona designada área nuclear olmeca. A cultura olmeca floresceu nesta região aproximadamente entre 1500 e 400 a.C., [ 1 ] e crê-se que tenha sido a civilização-mãe de todas as civilizações mesoamericanas que se desenvolveram posteriormente. [ 2 ] No entanto, desconhece-se a sua exacta filiação étnica, ainda que existam numerosas hipóteses colocadas para tentar resolver esta questão. O etnónimo olmeca foi cunhado pelos arqueólogos do século XX, e não devem confundir-se com os muito posteriores olmecas-xicalancas que ocuparam vários locais do México...
            Read more