All geek questions in one place

What is the equivalent of SCSS LESS Namespaces, class joining

Looking through the 2.0-wip-branch of the Twitter bootstrap, I found that LESS has a good way to bind variables and mixins. See sample code below:

#font { #family { .serif() { font-family: Georgia, "Times New Roman", Times, serif; } .sans-serif() { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .monospace() { font-family: Menlo, Monaco, Courier New, monospace; } } .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { font-size: @size; font-weight: @weight; line-height: @lineHeight; } .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { #font > #family > .serif; #font > .shorthand(@size, @weight, @lineHeight); } .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { #font > #family > .sans-serif; #font > .shorthand(@size, @weight, @lineHeight); } .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { #font > #family > .monospace; #font > .shorthand(@size, @weight, @lineHeight); } }

What is the SCSS equivalent? How to rewrite above in SCSS?

+4
source share
1 answer

Unfortunately, this is one of the missing features (for me) in SCSS today. The answer to this question is: there is no equivalent to SCSS . You must overwrite it using the SCSS-compliant method. Look, for example, at my correspondence in SCSS Twitter Bootstrap (uses the very example that you mentioned).

PS Do not use this plug, it is not supported right now, and you will probably be better off with the one mentioned on the official Twitter boot buffer wiki. ( more details )

+1
source

Source: https://habr.com/ru/post/1388708/

More articles:


All Articles