CSS进阶之SASS入门指南

CSS进阶之SASS入门指南#

        随着跟着公司学习项目的前端的推进，越来越对好奇了许久的SASS垂涎欲滴，哈哈，可能这个词使用不当，没有关系，就是对SASS有一股神秘的爱！好了，闲话不多说，上手SASS。

一、安装与配置##

1. 安装Ruby

   由于sass是紧密依赖于ruby语言实现在服务器端编译过程的，所以必须先安装好ruby。对于windows用户来说，需要手动下载安装[官网：https://www.ruby-lang.org/en/downloads/]

2. 安装SASS

   点击运行ruby的dos窗口程序，输入行命令：gem install sass
   
   Linux用户：sudo gem install sass

二、编译运行##

1. 查看sass文件转化成css内容：sass example.scss

2. scss文件编译城css文件：sass example.scss example.css

三、SASS语法##

1.变量###

SASS允许使用变量，所有变量以$开头，如果变量需要嵌套在字符串之中，就必须需要写在之中（Eg3）

    基本使用#####

    //Eg1:变量的基本使用
    $tmp_color:red;
    #t { color: $tmp_color; }

    //Eg1:编译结果：
    #t { color: red; }

---

    错误实例#####

    //Eg2:错误实例
    $mystyle-text-left:text-align:left  【X】

---

    组合嵌套变量与值######

通常情况下，一些数字，样式的颜色值，方向之定义为变量的形式，在样式中调用即可。

    //Eg3:放置在字符中需要加#{}符号 
    //注意：scss文件中的注释中不可以出现#{}，否则依照目前的sass语法规则，将可能出现编译失败
    $side:5;
    $common_200;
    .border {
        #{$common_width}px;//#{}
        border: solid 1px red;
        border-radius:#{$side}px;
        padding:#{$side}px;
    }

    //Eg3:编译结果：
    .border {
         200px;
        border: solid 1px red;
        border-radius: 5px;
        padding: 5px; 
    }

---

2.计算##

SASS允许在代码中使用算式，可以是两个数值运算，也可以是变量间的求值。（Eg4）

    计算######

    //Eg4:计算
    $num1:5;
    .border2 {
        margin: (14px/2); //值与值乘商
        top: 50px+100px; //值与值加减
        right: $num1*2px; //变量与值乘商
        bottom:#{$num1+$num1}px; //变量与变量加减
    }

    //Eg4：编译结果： 
    .border2 {
        margin: 7px;
        top: 150px;
        right: 10px;
        bottom: 10px;
    }

---

3.【复用:mixin/include;extend】##

复用功能之一(继承):SASS允许一个选择器，继承另一个选择器。
复用功能之二(Mixin):SASS中可以定义一个Mixin，它的功能有点想C语言的宏，它是可以重用的代码块。

【说明】可以在定义时，设置参数或者不设置，调用这个块时，直接使用艾特include命令

    继承(@extend)######

    //Eg5:extend继承
    //比如，现有名为a1的类别，a2要继承a1，则使用下列命令：
    $num:10;
    .a1 {
        color: blue;
    }

    .a2 {
        @extend .a1;
        font-size: $num+px;
    }

    //Eg5:编译效果：
    .a1, .a2 {
        color: blue; 
    }

    .a2 {
        font-size: 10px; 
    }

---

    Minxin######

    //Eg6:mixin继承
    @mixin bandf($boder_size, $font_size) {
        border: solid $boder_size+px red;
        font-size: $font_size+px;
    }

    .a3 {
        @include bandf(2, 13);
    }    

    //Eg6:编译结果：
    .a3 {
        border: solid 2px red;
        font-size: 13px;
    }

---

4.条件语句###

在SASS中，可以使用 艾特if 或 艾特if-else 或 艾特 if-else if 来进行条件的判断

    条件语句######

    //Eg7:条件语句
    $num:8;
    .a4 {
        @if $num==5 {
            color: blue;
        }
        @else if($num==4) {
            color: red;
        }
        @else {
            color: yellow;
        }
    }

    //Eg7:编译结果：
    .a4 {
        color: yellow; 
    }    

5.循环语句###

在SASS中，可以使用 艾特for 或者 艾特while、艾特each来进行循环的操作

    循环语句######

    
    //Eg8:循环语句
    @for $i from 1 to 10 {
        .a5_img#{$i} {
            background-image: url('images/img#{$i}.png');
        }
    }

    $j:9;
    @while $j>0 {
        .a5_img#{$j} {
            background-image:url('images/img#{$j}.png');
        }
        $j:$j - 1;
    }

    @each $item in 1,2,3,4 {
        .a7_img#{$item} {
            background-image:url('images/img#{$item}.png');
        }
    }

    //Eg8:编译结果：
    .a5_img1  { background-image: url("images/img1.png");  }
    .a5_img2  { background-image: url("images/img2.png");  }
    .a5_img3  { background-image: url("images/img3.png");  }
    .a5_img4  { background-image: url("images/img4.png");  }
    .a5_img5  { background-image: url("images/img5.png");  }
    .a5_img6  { background-image: url("images/img6.png");  }
    .a5_img7  { background-image: url("images/img7.png");  }
    .a5_img8  { background-image: url("images/img8.png");  }
    .a5_img9  { background-image: url("images/img9.png");  }
    .a5_img10 { background-image: url("images/img10.png"); }

---

6.自定义函数###

在SASS中，可以允许用户使用 艾特function 命令去编写自己的函数

【说明】使用 艾特function +函数名称，每个函数都需要有返回值的内容

    //Eg9:自定义函数
    @function du($r){
        @return $r*2;
    }

    .a8{
        border:solid #{du(2)}px red;
    }

    //Eg9:编译结果：
    .a8 {
        border: solid 4px red; 
    }

---

参考文献##

• Sass 基础教程