关于SASS

Posted 2021-10-08 Tap? taq

简介

SASS 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
使用 Sass 以及 Sass 的样式库（如 [Compass](http://compass-style.org/)）有助于更好地组织管理样式文件，以及更高效地开发项目。
具体可参考中文官网：https://www.sass.hk/

SASS的安装

先安装Ruby（下载网址：http://www.ruby-lang.org/zh_cn/downloads/）
安装完成后在cmd输入命令：gem install sass
即可安装成功

SASS的四种编译风格

nested：嵌套缩进的css代码，其为默认值
expanded：没有缩进的，扩展的css代码
compact：简洁格式的css代码
compressed：压缩后的css代码

SASS的一些终端命令

查看sass文件的css内容，在cmd中输入命令：sass 文件名.scss
把sass文件转为css文件,在cmd中输入命令：sass 文件名.scss 转换后的文件名.css
               （若想以某种风格压缩）：sass --style 风格名称 xxx.scss xxx.css
监听文件，一旦源文件有变动，会自动生成编译后的版本。在cmd中输入命令：sass --watch xxx.scss:xxx.css

更多命令的用法可通过输入命令sass --help来获取帮助。

也可使用nodejs下的gulp模块来编译sass

SASS的使用

sass的后缀文件名为.scss

定义变量：$变量名：$red:red;
若变量需要嵌入在字符串中（组合形式），则必须写在#{}中：$red:red; .border{border:1px solid #{$red}}

计算功能：可以是两个数值运算，也可以是变量间的运算（两个变量不能相加）
.border{margin:20px+30px; padding:#{$border*$border}px;}

复用功能（继承）：一个选择器继承另一个选择器
第一种：@extend xxx 
.a1{color:blue;}
.a2{@extend .a1; font-size:$num+px}
第二种：定义一个mixin块，是可以重用的代码块
        @mixin b($b,$f){border:$b+px solid red;font-size:$f+px;}
        .a3{@include b(2,13);}
        
插入文件：使用import命令来插入外部文件
@import \'xxx.scss\'; （若插入是scss文件则把编译后的代码文件插入其中。若插入是css文件，则相当于@import url(xxx.css)命令）

条件语句：@if / @if-else / @if-else if
.a4{
    @if $num==5{color:blue;}
    @else if $num==4{color:red;}
 }
 
循环语句：@for / @while / @each
@for:
@for $i from 1 to 10{
    .a5_img#{$i}{
        background-image:url(\'img#{$i}.png\');
    }
}
@while:
$j:9;
@while $j>0{
    .a6_img${$j}{
        background-image:url(\'img#{$i}.png\');
    }
    $j:$j-1;
}
@each:
@each $item in 1,2,3,4,5{
    .a6_img#{$item}{
        background-image:url(\'img#{$item}.png\');
    }
}

函数：@function
@function a7($r){
    @return $r*2; 
}
.a8{
    border:#{a7(2)}px solid #000;
}

选择器（标签）嵌套：
div{
    h1{
        color:red;
    }
}
也可以用\'&\'代表嵌套规则外层的父选择器
a {
    &:hover { text-decoration: underline; }
    body.firefox & { font-weight: normal; }
}

属性嵌套：（便于管理同一类控制的属性）
a{
    font: {
        family: fantasy;
        size: 30em;
        weight: bold;
    }
}

插值语句 #{}:
$name: foo;
$attr: border;
p.#{$name} {
    #{$attr}-color: blue;
}