Sass基础语法说明

简介

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。它是一种CSS预处理器。
对CSS进行了扩展，完全兼容所有版本的 CSS，并 增加了规则、变量、混入、选择器、继承、内置函数等特性，可生成格式化的CSS代码，减少了CSS中重复的代码，易于组织和维护节省开发时间。

Sass的安装&编译

安装

# 全局安装
npm install -g -y sass
# 或
yarn add -g sass

编译

手动编译

sass index.scss index.css --style compressed --sourcemap

实时监听

# 监听input.scss文件，生成output.css文件
sass --watch input.scss ouput.css
# 监听app下的sass目录，生成的css文件存入public/css目录
sass --watch app/sass:public/css

编译参数

1. –style：指定编译后的css排版格式。内置编译格式：
   expanded(默认)，生的css文件就是常见的css排版格式。
   compressed，压缩（css被压缩到一行）。
2. –sourcemap：开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件（默认开启）。

语法

变量的使用

使用$符号作为变量的标志

//声明变量，全局可用
$font-color: #ccc;
body{
	//声明变量，只在当前{}中可用
	$height: 100px;
	color: $font-color;
	height: $height;
} 

// 编译后的css
body{
	color: #ccc;
	height: 100px;
}

变量中可引用其他变量

$width:2px;
//引用了其他变量
$border-attr: $width solid #ccc;
.box{
	border: $border-attr;
}

// 编译后的css
.box {
  border: 2px solid #ccc;
}

嵌套css选择器

$font-color: red;
ul {
    li {
        color: $font-color;
        a {
            text-decoration: none;
        }
    }
}

// 编译后的css
ul li {
    color: red;
}
ul li a {
    text-decoration: none;
}

父选择器的标识符&

总体上是一个类似占位符的效果

body a {
	color: blue;
	&:hover { color: red };
}
body title {
	color: #aaa;
	//这里，&必须位于名称开头
	&-sub {
		color: gray;
	}
}

// 编译后的css
body a {
    color: blue;
}
body a:hover {
    color: red;
}
body title {
    color: #aaa;
}
body title-sub {
    color: gray;
}

注意

1. &:hover的编译结果
2. &-sub的编译结果

属性嵌套

针对：border-width,border-height,font-size,font-weight等，可使用属性嵌套。需要把属性名从中划线-处断开，在根属性后边添加一个冒号**😗*，紧跟一个{ }块，把子属性部分写在这个{ }块中

.box{
    //注意，这里的":"
    border:{
    	style:solid;
    	width:1px;
    	color:#ccc;
    }
    //注意，这里的":"
    font:{
    	size: 20px;
    	weight: bold;
    }
}
// 编译后的css
.box {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    font-size: 20px;
    font-weight: bold;
}

个人感觉还不如直接写全称

模块化&导入

可将scss分模块定义，最后使用@import合并编译成一个css文件。

// 在文件_base.scss中定义变量
$primary-color: #888;
 
// 在文件index.scss中导入使用

@import "base"
body{
    margin: 0 auto;
    color: $primary-color;
}

//编译后的index.css文件
body {
    margin: 0 auto;
    color: #888;
}

@import中的base写不写“_”都可以，也可以不用写扩展名，但是如果此时目录中同时有base.scss和_base.scss，则_base.scss中的定义无效。

混合

1. 使用@mixin进行定义，编译后的css文件中不显示。
2. 使用@include进行混合，将@mixin的内容混合到@include处。

@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}
.box { 
    @include transform(rotate(30deg)); 
}

//编译后的css
.box {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

继承

以%开头进行样式定义，使用@extend 进行继承

%message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}
.message {
    @extend %message-shared;
}
.success {
    @extend %message-shared;
    border-color: green;
}
.error {
    @extend %message-shared;
    border-color: red;
}

//编译后的css
.error, .success, .message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}
.success {
    border-color: green;
}
.error {
    border-color: red;
}

注意观察编译后的css。凡是使用了@extend的类，在css中都被归到一起，以便使用相同的样式。而且使用%开头定义的样式，不会在编译后的css中显示。

类的继承

.base_1{
	color: red;
}
.base_2{
    width: 100px;
}
.extend_all {
    @extend .base_1;
    @extend .base_2;
    height: 20px;
}

//编译后的css
.base_1, .extend_all {
    color: red;
}
.base_2, .extend_all {
    width: 100px;
}
.extend_all {
    height: 20px;
}

注意观察编译后的css。被继承的.base_1和.base_2，在编译后的css中依然存在。

操作符

宽度转百分比

.container {
    width: 100%;
}
article[role="main"] {
    float: left;
    //计算百分百
    width: 600px / 960px * 100%;
}
aside[role="complementary"] {
    float: right;
    width: 300px / 960px * 100%;
}
//编译后的css
.container {
    width: 100%;
}

article[role="main"] {
    float: left;
    width: 62.5%;
}
aside[role="complementary"] {
    float: right;
    width: 31.25%;
}

注释

在scss中使用"//“的单行注释不会出现在编译后的css文件中。因为css中没有”//“注释语法，只有”/**/"注释语法。

//单行注释
/*多行注释*/
.wrapper{
    width: 100%; //单行注释
    /*多行注释*/
    height: 40px;
    padding: 10px;
}

//编译后的css
/*多行注释*/
.wrapper {
    width: 100%;
    /*多行注释*/
    height: 40px;
    padding: 10px;
}

注意：在使用压缩格式–style=compressed时，所有注释都不会出现在编译后的css中。

在压缩后的css中显示注释

使用"/*!"做为注释开头，可在编译压缩后的css中显示注释

/*这个注释不会显示*/
body{
    color: #aaa;
}
//单行注释
/*!这个注释会显示*/
.wrapper{
    width: 100%; //单行注释
    /*多行注释*/
    height: 40px;
    padding: 10px;
}

//编译后的css
body{color:#aaa}/*!这个注释会显示*/.wrapper{width:100%;height:40px;padding:10px}