scss语法复制集

放在.scss里面使用

// /!注释/

//有三种形式：

// /!（1）//comment：该注释只是在.scss源文件中有，编译后的css文件中没有。

// /!（2）/! /：重要注释，任何style的css文件中都会有，一般放置css文件版权说明等信息。

// /!（3）/ /：该注释在compressed的style的css中没有，其他style的css文件都会含有。/

// /

$fontColor:#fff; //定义一个变量

$color1:#aeaeae; //定义变量

.dov-color{

color:$color1;

}

//嵌套引用

//嵌套引用在其他编程语言中即是字符串插值，需要用#{}进行包裹：

$left:left;

.dov-#{$left}-eg{

background-color:$color1;

color:$fontColor;

}

//变量计算

//Sass中也是支持对于变量进行简单的计算：

$chang:.9rem;

.dov-jisuan{

font-size:$chang+1rem;

}

//变量可以支持计算的类型，还是比较多的：

.px-cook {

font: 10px/8px;            // Plain CSS, no division

$width: 1000px;

width: $width/2;            // Uses a variable, does division

width: round(1.5)/2;        // Uses a function, does division

height: (500px/2);          // Uses parentheses, does division

margin-left: 5px + 8px/2px; // Uses +, does division

font: (italic bold 10px/8px); // In a list, parentheses don't count

}

//属性也可以嵌套，比如border-color属性，可以写成：

/*  研究一下哪里用到比较多这个方式*/

// p {

// 　　border: {

//    　　color: red;

// 　　}

// }

//父元素引用

//在嵌套的子层级中，允许使用&引用父元素：

.dov-curosr{

&:hover{

color:red;

}

}

//代码重用

//继承

//SASS允许一个选择器，继承另一个选择器。比如，现有class1：

.class1{

font-size:19px;

background-color:black;

padding:1rem;

width:50%;

border-radius:6px;

}

.class2{

@extend .class1;

color:#fff;

}

//Mixin&Include

//Mixin有点像C语言的宏（macro），是可以重用的代码块。

//使用@mixin命令，定义一个代码块。

//定义代码块

@mixin centers {

float: left;

margin-left: 10px;

}

//使用@include命令，调用这个mixin。

.minxin-div {

@include centers;

}

/*

@*********

编程式方法

流程控制

条件语句

循环语句

函数

*/

//函数

//Sass允许用户自定义函数，原型如下所示：

//复制代码

@function double($n) {

@return $n * 2;

}

#sidebar {

width: double(5px);

}