【项目实战】sass使用基础篇（上）

Sass是一种CSS预处理语言。CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。

CSS预处理语言有Scss(Sass) 和Less、Postcss。
Scss和Sass

sass一开始用的是一种缩进式的语法格式

采用这种格式文件的后缀名是.sass

在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法
区别：

后缀名不同 .sass和.scss
语法不同，请看下面

新版：

/新版本
多行文本注释/

//新版本
//单行文本注释

@import “base”;

@mixin alert{
color:red;
background:blue;
}

.alert-warning{
@include alert;
}

ul{
font-size:15px;
li{
list-style:none;
}
}

老版本：

/*新版本
多行文本注释

//新版本
单行文本注释

@import “base”

=alert
color:red
background:blue

.alert-warning
+alert

ul
font-size:15px
li
list-style:none

变量
变量的意义

在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想要使用样式的时候使用变量了

这样的优点就是便于维护，更改方便
变量的使用

可以通过$来定义变量，在变量名字中可以使用-和_来作为连接，并且-和_是可以互通的，就是用起来一模一样。

变量的值可以是字符串、数字、颜色等等，在变量里还可以使用其他变量，使用的时候直接写变量名就好了

例如

$primary-color:#ff6600;
$primary-border:1px solid $primary_color;

div.box{
background:$primary-color;
}

h1.page-header{
border:$primary-border;
}

css写法—》

div.box {
background: #ff6600;
}

h1.page-header {
border: 1px solid #ff6600;
}

嵌套的使用

合理的使用嵌套语法，可以使我们编写代码更为快捷

假设我们想写这样的css：

.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}

在sass里我们可以这样写

.nav{
height:100px;
ul{
margin:0;
li {
float:left;
list-style:none;
padding:5px;
}
}
}

大家会发现，写出来的代码父和子之间都有空格隔开，如果我们需要给a加上伪类的话我们这样写

.nav{
height:100px;
a{
color:#fff;
:hover{
color:#ff6600;
}
}
}

在里面就会出现这样的情况

.nav a :hover {
color: #ff6600;
}

我们发现在a和:hover之间有了空格，这样是不好的，所以我们需要在写的时候在：hover之前把a加上，这样就需要用到在之类里引用父类选择器的方式，我们可以用&符号代替父类

例如：

.nav{
height:100px;
a{
color:#fff;
&:hover{
color:#ff6600;
}
}
}

这样就好了，下面来个完整的代码：

.nav{
height:100px;
ul{
margin:0;
li{
float:left;
list-style:none;
padding:5px;
}
a{
display:block;
color:#000;
&:hover{
color:#f60;
background:red;
}
}
}

& &-text{
    font-size:15px;
}

}

css写法-----》

.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
.nav ul a {
display: block;
color: #000;
}

 

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118611969