最近在学习sass,从sass新手的角度做一个简单的总结,总结的不对的地方期望各位大大们能多多指点,本文是针对sass3.4做的一个总结~
sass的变量以$开头,类似php里变量的写法
$blue : #1875e7; div { color : $blue; }
上面那个例子是把变量用在属性值上,如果要用在选择器或属性名上呢?如果我们简单的这样写:
$name: test; $attr: border; p.$name { $attr-color: red; }
编译出错了,正确使用方式应该是用#{}
包裹,上面的这个例子正确用法是:
$name: test; $attr: border; p.#{$name} { #{$attr}-color: red; }
了解了变量的简单使用,要用好变量,息息相关的就是作用域了。
sass支持局部变量和全局变量。定义在选择器内的我们称为局部变量,反之为全局变量。简单的在sass3.4中看一个例子
$width: 10px; .wrap{ $width: 20px; $width: 40px; .main{ width: $width; } .sidebar{ $width: 30px; width: $width; } } .content{ width: $width; }
编译出来的结果是:
.wrap .main { width: 40px; } .wrap .sidebar { width: 30px; } .content { width: 10px; }
后定义的会覆盖前面定义的,选择器内的同名变量不加特殊声明不会影响选择器外的。
如果期望后面定义的不要覆盖前面的呢?!default可以做到这一点。
$height: 10px; $height: 20px !default; div { height: $height; //结果为10 }
这时候假设我们又遇到一个情况,希望选择器里覆盖外面的全局变量,应该怎么写? !global可以帮助我们做到:
$height: 10px; div { $height: 20px !global; height: $height; } h1 { height: $height; }
编译结果是:
div { height: 20px; } h1 { height: 20px; }
有了变量,如果没有运算符就像是一个个散落的珍珠,缺少一根线把它们串成一个项链。所以sass也提供了简单的四则运算。看一个四则运算的例子:
$base: 2px; .a { height: $base * 2; // height: $base * 2px; error // height: 2px * 2px; error width: $base / 2; width: $base / 2px; width: 2px / 2; width: 2 / 2px; width: 2 / 2; margin-left: $base + 2px; margin-left: $base + 2; margin-right: $base - 2px; margin-right: $base - 2; margin-right: 2 - 2; }
编译结果:
.a { height: 4px; width: 1px; width: 1; width: 2px / 2; width: 2 / 2px; width: 2 / 2; margin-left: 4px; margin-left: 4px; margin-right: 0px; margin-right: 0px; margin-right: 0; }
看上面的例子,加法和减法相对简单,除法和乘法有些特殊:
简单的总结如下:
了解完变量和运算符,我们就可以看看sass的语句啦~
我们所熟悉的if语句:
p { @if 1 + 1 == 2 { border: 1px solid black; } @if 5 < 3 { border: 2px dotted black; } }
sass支持for循环,while循环,each循环:
[@for](/user/for) $i from 1 to 10 { .width-#{$i} { border: #{$i}px solid blue; } } $i: 6; [@while](/user/while) $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } [@each](/user/each) $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); } }
css开发中,我的习惯经常是,比如给外层容器去个class叫‘abc’,它的子集容器就会取名诸如'abc-title'、'abc-content' 等。这样一定程度上看起来似乎这些class都有所关联了,但是代码一多还是看起来非常混乱。
假设现在别人要复用我的代码了,就算看懂估计也得琢磨半天。有什么更好的模块化的方法呢。
sass可以使用{}进行嵌套书写,使用&进行引用父元素。比如:
div { a { color: #f00; &:hover { color: #0f0; }; } }
编译结果是:
div a { color: #f00; } div a:hover { color: #0f0; }
看完了这两个属性的用法我们之前那个例子就可以写成:
.abc { &-title { ... } $-content { ... } }
这样看起来立刻觉得舒服多了,别人要复用也一目了然啦。说起模块化,特定之一就是代码复用。sass提供了哪些方便代码复用、重用的语法呢?
假设我们有个class2要继承class1,我们可以这样写:
.class1 { border: 1px solid #ddd; } .class2 { @extend .class1; font-size: 120%; }
编译出来的结果是:
.class1, .class2 { border: 1px solid #ddd; } .class2 { font-size: 120%; }
有了@extend,感觉我们的代码量瞬间能少掉一大截,避免了不少重复的代码。但是突然我们又想到这样一个场景,假设class1本来并不需要存在,比如我们定义了一段超长则变省略号的代码,如果要@extend我们得额外定义一个多余的类class1。于是sass又提供了@mixin
上面的代码可以变成如下:
// 这边写的是mixin class1,自动生成了别的东西。。。 [@mixin](/user/mixin) class1 { border: 1px solid #ddd; } .class2 { @include class1; font-size: 120%; } .class3 { @include class1; font-size: 100%; }
编译出来的结果是:
.class2 { border: 1px solid #ddd; font-size: 120%; } .class3 { border: 1px solid #ddd; font-size: 100%; }
这样我们多余定义的类class1就去掉啦,但是现在新的问题来了,我们看看编译出的代码,class2和class3中有一段重复的代码,mixin只是简单的把代码嵌套进来了,假设我们有一堆class,编译出来将会有一堆重复的代码,代码将会非常冗余。有没有办法解决呢?
上面的代码我们通过%改造成这样:
%class1 { border: 1px solid #ddd; } .class2 { @extend %class1; font-size: 120%; } .class3 { @extend %class1; font-size: 100%; }
编译出来的结果是:
.class2, .class3 { border: 1px solid #ddd; } .class2 { font-size: 120%; } .class3 { font-size: 100%; }
这正是我们所需要的!所以相比extend,能用placeholder的情况我们理论上应该优先用placeholder。
sass支持用户自定义自己的函数:
// 这里写的是function double。。。 [@function](/user/function) double($n) { @return $n * 2; } .test { height: double(3px); }
简单的总结就到此为止啦,不懂sass到了解sass是一个阶段,了解sass到会用sass又是另一个境界。简单的语法总结,仅仅是到了一个了解阶段,如何用好,值得探究的地方还有太多~
参考文档:
http://www.ruanyifeng.com/blog/2012/06/sass.html
http://www.w3cplus.com/sassguide/
http://www.w3cplus.com/preprocessor/sass-mixin-placeholder.html
http://www.w3cplus.com/preprocessor/sass-advanced.html
http://www.w3cplus.com/preprocessor/understanding-variable-scope-in-sass.html
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句