【项目实战】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; } .nav ul a:hover { color: #f60; background: red; } .nav .nav-text { font-size: 15px; }

嵌套属性

我们可以把一些复合属性的子属性来嵌套编写，加快编写速度，例如

body{ font:{ family:Helvitica; size:15px; weight:bold; } } .nav{ border:1px solid red{ left:none; right:none; } }

.page-next{ transition:{ property:all; delay:2s; } }

css写法-----》

body { font-family: Helvitica; font-size: 15px; font-weight: bold; }

.nav { border: 1px solid red; border-left: none; border-right: none; }

.page-next { transition-property: all; transition-delay: 2s; }

mixin 混合

你可以把它想象成一个有名字的定义好的样式

 

每一个mixin都有自己的名字，类似于js里的函数定义方法如下

@mixin 名字(参数1，参数2…){ … }

使用方法是在其他选择器css样式里通过@include引入，其实就相当于将mixin里的代码写入到这个选择器的css里，如下：

@mixin alert { color:#f60; background-color:#f60; a{ color:pink; } &-a{ color:red; } }

.alert-warning{ @include alert; }

css写法-----》

.alert-warning { color: #f60; background-color: #f60; } .alert-warning a { color: pink; } .alert-warning-a { color: red; }

刚才是没有参数的mixin，mixin也可以拥有参数，需要注意的是：

形参的名字前要加$
传参的时候只写值的话要按顺序传
传参的时候不想按顺序的话需要加上形参名字

 

例如：

@mixin alert(c o l o r , color,color,background) { color:c o l o r ; b a c k g r o u n d − c o l o r : color; background-color:color;background−color:background; a{ color:darken($color,10%);//把颜色加深百分之十 } }

.alert-warning{ @include alert(red,blue); }

.alert-info{ @include alert(b a c k g r o u n d : r e d , background:red,background:red,color:blue); }

css写法------》

.alert-warning { color: red; background-color: blue; } .alert-warning a { color: #cc0000; }

.alert-info { color: blue; background-color: red; } .alert-info a { color: #0000cc; }

继承拓展 extend

如果我们有一个选择器想要拥有另一个选择所有的东西，不管是样式还是子元素等等，可以使用@extend来继承

大家需要注意的是，++b继承a的时候，a的子元素设置了样式，也会给b的子元素设置样式++，达到完全一样的情况，例如：

.alert { padding:5px; }

.alert a { font:{ weight:bold; size:15px; } }

.alert-info { @extend .alert; backgournd:skyblue; }

css写法----》

.alert, .alert-info { padding: 5px; }

.alert a, .alert-info a { font-weight: bold; font-size: 15px; }

.alert-info { backgournd: skyblue; }

partials

在以前咱们编写css的时候，一个css引入另一个css需要使用@import，其实这是不好的，会多发一次http请求，影响咱们站点的响应速度。

在sass里，咱们可以把小的sass文件分出去，叫做partials，在某个sass里通过@import ‘partials名’去引入，注意路径哟，这样的话就可以把partials里的代码引到咱们大的sass里一起编译

需要注意的是 partials的文件名前要加_

 

_base.scss :

body{ margin:0; padding:0; }

style.scss :

@import “base”;

.alert { padding:5px; }

.alert a { font:{ weight:bold; size:15px; } }

.alert-info { @extend .alert; backgournd:skyblue; }

css写法----------->

body { margin: 0; padding: 0; }

.alert, .alert-info { padding: 5px; }

.alert a, .alert-info a { font-weight: bold; font-size: 15px; }

.alert-info { backgournd: skyblue; }

这样的话我们就可以把模块化的思想引入到sass里了 comment注释

sass里的注释有三种

 

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