sass基础

变量声明

变量的概念

1. 使用美元符号$
2. 注意声明的顺序
3. 可以在一个变量中引用另一个变量
4. 调用变量时依然使用美元符号加变量名

// 不同变量可以相互引用，但要注意声明顺序
$demo-color:pink;
$demo-border: 1px solid $demo-color;
.nav-border {
    border: $demo-border;
}

.nav-border {
    border: 1px solid pink;
}

嵌套

• 使用 Sass 可以轻松地将多个内容嵌套在一起，而不用像 CSS 一样需要分开写

// 您可以尽情的使用sass语法实现css无法实现的套娃操作!!!
#content {
    div{
        h1{border: 1px solid gray;}
        p{width: 100px;}
    }
}

#content div h1 {
    border: 1px solid gray;
}
#content div p {
    width: 100px;
}

符号&

• 符号 & 将该符号后面的内容与其交完素直接进行链接，不像平常的嵌套子元素一样与父元素是空格连接的
• 适用于各种伪类

// 比如下方的hover就和上一级元素a构成了伪类关系
article a {
    color: gray;
    &:hover {
        transform: translateX(120%);
    }
}

article a {
	color:gray;
}
article a:hover {
    transform: translateX(120%);
}

群组嵌套

• 子元素会和父元素一一配对，反之亦然，如果父元素使用逗号隔开，那么每个父聂泰都会与子元素一一配对

// 群组嵌套选择器，一举多得
#content {
    h1,h2,h3,h4{border: solid;}
}

#content h1,
#content h2,
#content h3,
#content h4 {
    border: solid;
}

多种选择器

• 可以在嵌套层内使用多种选择器

如：

1. +相邻兄弟选择器
2. “>“子元素选择器
3. ~后继兄弟选择器

#strick{
    > h1{border-top: 1px;}
    + p{text-indent: 2em;}
    th >{
        dt{margin: 0;}
        dd{padding: 0;}
    }
}

#strick>h1 {
    border-top: 1px;
}

#strick+p {
    text-indent: 2em;
}

#strick th>dt {
    margin: 0;
}

#strick th>dd {
    padding: 0;
}

多属性叠写

• 支持多属性叠写

如果我们需要一次性指定：

• Border-width
• Border-style

直接嵌套写入，注意Border后面有冒号！括号内填对应属性即可Sass编译器会自动链接

#border-test{
    border: {
        style: solid;
        width: 100px;
    }
}

#border-test {
    border-style: solid;
    border-width: 100px;
}

import

lmport使用方法

1. 导入外部scss文件，注意不需要添加后缀.scss
2. 不可以导入CSS文件
3. Scss编译时，优先把import导入的内容进行编译并插入到输出CSS文件内，之后才编译本文件的内容
4. 可以导入scss文件内的局部内容等如@lmport “./part/abc"，这样我就导入part.scss下的abc

@import "./part";

#aside {
    flex: {
        basis: 200px;
        shrink: 1;
        grow: 0;
    }
}

!default

!default定义：如果这个变量被声明赋值了，那就用它声明的值否则就用这个默认值

$default-test: 4000px !default;
#div1{
    width: $default-test;
}

#div1 {
    width: 4000px;
}

@mixin

可以把它当做一个大型的结构体，声明格式如下:

@mixin name {}

在任意处使用 @include 即可把 @mixin 定义内容引入

@mixin rounded-cornens {
    -moz-border-radtus: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.notice {
    @include rounded-corners;
}

.notice {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

@mixin嵌套结构

@mixin中可以写入任意结构

甚至可以使用多种选择器

@mixin mixintest {
    demo {
        > hi{color: gray;}
        + div {
        	    div.echo & {
            	border: 1px solid gray;
        	}
        	&;hover{
         	   transform: scale(110%);
        	}
        }
    }
    .mt {
        @include mixintest;
    }
}

@mixin函数

• @mixin 声明名称后小括号内写入函数形参，注意变量的声明形式
• 调用时使用小括号传入实参即可
• 可以定义带有默认值的形参

@mixin test-function($a,$b,$e) {
    color: $a;
    &:hover{color: $b;}
    &:visited{color: $c;}
}
a{
    @include test-function(blue, red, yellow);
}

a {color: blue;}
a:hover {color: red;}
a:visited {color: yellow;}

Scss中的注释

• 普通注释 //

• 编译后不会显示在 CSS 内

• 而注释 /**/

• 编译后会显示在 CSS 内

/* 这种注释会出现在生成的css文件内 */
// 但是这种注释不会!

继承

• 使用 @extends name 来使用继承关系，引入名称(或者部分名称) 为 name 的选择器
• 譬如 .error 会同时引入 .error 或 div.error 或 #c.error
• 在标签内使用class=“aError”是，实际上解析后为class=“aError error”

.error {
    border: 1px solid red;
    background-color: #fdd;
}
.aError {
    @extend .error;
    border-wtdth: 3px;
}

.error,
.aError {
    border: 1px solid red;
    background-color: #fdd;
}
.aError {
    border-width: 3px;
}

编译成CSS

1. 进入到SCSS文件所在目录下
2. 打开命令提示符，使用cd进入到指定目录(或者shift右击文件夹，在当前目录下打开powershell)
3. 输入指令 (s1.css名称是可以随便取的) sass s1.scss s1.css