sass入门指南

Posted 2020-06-27 Cynthia娆墨旧染

1.简介

sass 它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。这被叫做“css预处理器”（css preprocessor）。它提供了很便利的语法，节省了我们写css的时间。

 

 

2.安装

　　(1)首先确保你的电脑安装了 ruby （传送门 https://www.ruby-lang.org/zh_cn/downloads/）

// 控制台查看是否安装成功
suby -v

　

   　(2)安装 sass

gem install sass

 

 

3.使用

　　（1）用编辑器 新建文件夹 demo ，在demo里新建文件 demo.scss ，代码如下

.list_1 {
    ul {padding-left: 1.6rem;}
    li {
        border-bottom: 1px solid #ddd;padding-right: 1.6rem;
        a {
            display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;
            background:url("../image/icon_goto.png") right center no-repeat;
            background-size: auto 1.4rem;
            padding-right: 1.5rem;
        }
        time {float: right;color: #999;}
    }
}

　　（2）控制台 进入demo文件夹下

// demo.css 是生成后的css文件名
sass demo.scss demo.css

　　

 

4.sass提供的四种编译风格

// nested：嵌套缩进的css代码，它是默认值。
// expanded：没有缩进的、扩展的css代码。
// compact：简洁格式的css代码。
// compressed：压缩后的css代码。

　　比如

sass --style compressed test.sass test.css

　　

　　

5.sass 语法

　　(1)变量

// SASS允许使用变量，所有变量以$开头。
     
     $blue : #1875e7;　

　　div {
　　　color : $blue;
　　}

// 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
  
      $side : left;

　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

 

　　（2）计算功能

   body {
　　　　margin: (14px/2);

　　　　top: 150px + 100px;

　　　　right: $var * 5%;
　　}

　　

　　(3)嵌套的写法

    div {
　　　　h1{
　　　　　　color:red;
　　　　}
　　}

// 属性也可以嵌套，比如border-color属性，注意后面必须加上冒号，可以写成：
   p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

　　（4）注释

    /*! 
　　　　重要注释！也会保留这行注释，通常可以用于声明版权信息
　　*/


    /* comment */  会保留到编译后的文件


    // comment，只保留在SASS源文件中，编译后被省略。

　　（5）代码的重用

// 单个属性重用
.class1 {border: 1px solid #ddd;}
.class2 {@extend .class1;font-size:120%;}

// 重用的代码块

     @mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}


div {
　　　　@include left;
　  }

　　

　　（6）// 指定参数和缺省值

@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
}

div {
　　　　@include left(20px);
　　}

 

　　（7）颜色函数（内置）

    lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

　　

　　（8）插入外部文件

　@import "path/filename.scss";

　　

　　（9）条件语句

// @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;
　　}

//支持for循环：
@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

// 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");
　　　　}
　　}

　　

　　（10）自定义函数

@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}