sass的核心知识及使用

Posted 2020-09-27 砌墙的砖

sass的官方链接地址：htpp://sass-lang.com

参考链接地址：http://www.haorooms.com/post/sass_css

1. 基础语法
1.1 变量
SASS允许使用变量，所有变量以$开头
$blue : blue;
div {
    color:$blue;
}
如果变量需要镶嵌在字符串中，就必须要写在 #{} 中
$side:left;
.rounded {
    border-#{$side}-radius:5px;
}
1.2 计算功能
SASS允许在代码中使用计算式：
body {
    margin:(14px/2);
    top:50px+100px;
    right:$var*10%
}
1.3 嵌套
SASS允许选择器嵌套，比如下面的css代码：
div h1 {
    color:red;
}
//可以写成：
div {
    h1 {
        color:red;
    }
}
//属性也可以嵌套，比如 border-color 属性，可以写成：
p {
    border:{
        color:red;
    }
}
//注意：border后面必须加上冒号
在嵌套的代码块内，可以使用 & 引用父元素，比如 a:hover 伪类，可以写成：
a {
    &:hover {
        color:red
    }
}
1.4 注释
SASS 共有两种注释风格。
//注释，只保留在SASS源文件中
/*注释*/，会保留到编译后的 css 文件中
/*!
    重要注释！，即使是压缩模式编译，也会保留这行注释
*/
2. 代码的重用
2.1 继承
SASS允许使用一个选择器，继承另一个选择器，比如 class1 :
.class1 {
    border:1px solid #ddd;
}
class2 要继承 class1,就要使用 @extend 命令：
.class2 {
    @extend .class1;
    font-size:120%;
 }
2.2 mixin
mixin有点像C语言中的宏（marco）,是可以重用的代码块。 使用 @mixin 命令，定义一个代码块：
@mixin left {
    float:left;
    margin-left:10px;
}
使用 @include 命令，调用这个 mixin:
div {
    @include left;
}
mixin的请打之处，在于可以指定参数和缺省值：
@mixin left($value:10px){
    float:left;
    margin-right:$value;
}
使用的时候，根据需要加入参数：
div {
    @include left(20px);
}
下面是一个 mixin 的实例，用来生成浏览器前缀：
@mixin rounded($vert,$horz,$radius:10px){
    border-#{$vert}-#{$horz}-radius:$radius;
    -moz-border-#{$vert}-#{horz}-radius:$radius;
    -webkit-border-#{$vert}-#{$horz}-radius:$radius;
}
使用的时候，可以像下面这样调用：
#navbar li {
    @include rounded(top,left);
}
//或者
#footer {
    @include rounded(top,left,5px);
}
2.3 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色：
lighten(#cc3,10%);//#d6d65c
darken(#cc3,10%);//#a3a3a3
grayscale(#ccs);//#808080
complement(#cc3);//#33c
2.4 插入文件
@import 命令，用来插入外部文件：
@import "path/filename.scss";
如果插入的是 .css 文件，则等同于css的import命令。
@import "foo.css";
3.高级用法
3.1 条件语句
@if可以用来判断：
p {
    @if 1+1==2{border:1px solid;}
    @if 5<3 {border:2px dotted;}
}
配套的还有 @else 命令：
@if lightness($color) > 30% {
    background-color:#000;
}@else{
    background-color:#fff;
}
3.2 循环语句
SASS 支持 for 循环：
@for $i from 1 to 10 {
    .border-#{$i}{
        border:#{$i}px solid blue;
    }
}
SASS 也支持 while 循环：
$i:6;
    @while $i>0 {
        .item-#{$i} {width:2em * $i;}
        $i:$i - 2;
    }
each 命令，作用与 for 类似：
@each $member in a,b,c,d {
    .#($member) {
        background-image:url("/image/#{$member}.jpg");
    }
}
3.3 自定义函数
SASS 允许用户编写自己的函数：
@function double($n){
    @return $n * 2;
}
#sidebar {
    width:double(5px);
}
4. 使用
可以在屏幕上显示 .scss 文件转化的 css 代码
sass test.scss
如果要将显示结果保存成文件，后面再跟一个 .css 文件名
sass test.scss test.css
SASS提供了四中编译风格：
nested:嵌套缩进的 css 代码，它是默认值
expanded:没有缩进的，扩展的 css 代码
compact:简洁格式的 css 代码
compressed:压缩后的 css 代码
生产环境中，一般使用最后一个选项：
sass --style compressed test.scss test.css
也可以让 SASS 监听某个文件或者目录，一旦源文件有变动，就自动生成编译后的版本：
//watch a file 
sass --watch input.scss:output.css
//watch a directory
sass --watch app/sass:public/stylesheets
SASS的官方网站，提供一个在线转换器，可以用来练习和测试。

用别人的只是点，借花献佛，markdown 不错，用着很顺手。