scss 的使用和语法
前言
前面介绍了 scss 的安装过程,相信大家都已经成功了,那先接下来我来介绍一下 scss 的语法规格和使用中的一些技巧.对于 scss 的学习,可以帮助大家方便快捷的开发,很实用,废话不多说了,来介绍吧.
为了方便演示,可以先建两个文件,可以直接复制代码,这样比较方便查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="header">
<ul class="header-ul">
<li>
我是主页
</li>
<li>
我的喜好
</li>
<li>
关于我
</li>
</ul>
</div>
</body>
</html>
打开浏览器看看效果
1.scss 使用变量
在之前的 css 代码中都要中规中矩的按照我们的 css 语法进行编写,没有变量,不能统一去修改我们的代码,因此 scss 让人们受益的一个重要特性就是它可以在 css 代码中引入变量,语法很简单,就是以 $ 符号开头,然后跟变量面就可以啦.
注意事项:
语法 basic-border: 1px solid black;
/* 定义变量 */
$style-none: none;
$header_bg: #cc6699;
$white: white;
$basic-border: 5px solid black;
.header-ul {
list-style: $style-none;
color: $white;
background-color: $header_bg;
border: $basic-border;
}
// 代码执行完之后 会被编译为
.header-ul {
list-style: none;
color: white;
background-color: #cc6699;
border:5px solid black;
}
然后可以看下我们的效果
代码在编译的时候,会把所有的变量都变成原来赋的值,如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。
/* 也可以这样嵌套使用 */
$style-none: none;
$header_bg: #cc6699;
$green: green;
$basic-border: 5px solid $green; // 这个地方
.header-ul {
list-style: $style-none;
color: $white;
background-color: $header_bg;
border: $basic-border;
}
效果如下
如果变量名相同的话,后面的会把前面的替换掉
$style-none: none;
$header_bg: #cc6699;
$white: white;
$green: green; // 这个地方
$green: blue; // 这个地方
$basic-border: 5px solid $green;
.header-ul {
list-style: $style-none;
color: $white;
background-color: $header_bg;
border: $basic-border;
}
2. 嵌套 scss 规则
我们在写 css 代码的时候会重写很多的选择器例如:
div ul li {
.....
}
div ul li a {
.....
}
会显得我们的代码非常的繁琐,那么在 scss 中就很好的解决了这个问题,比如:
.header {
.header-ul { // 这个地方
list-style: $style-none;
color: $white;
background-color: $header_bg;
border: $basic-border;
li { // 这个地方
display: inline-block;
margin: 15px 20px;
}
}
}
// 这段代码会被编译为
.header .header-ul {
list-style: none;
color: white;
background-color: #cc6699;
border: 5px solid blue;
}
.header .header-ul li {
display: inline-block;
margin: 15px 20px;
}
这样就很大程度上减少了我们写的 css 代码了
还有一个 & 父元素选择的标识符,在嵌套层写入这个符号就代表的是选中了它的父元素
$style-none: none;
$header_bg: #cc6699;
$white: white;
$green: green;
$green: blue;
$basic-border: 5px solid $green;
$font-hover-color: turquoise;
.header {
&-ul { // 这个地方
list-style: $style-none;
color: $white;
background-color: $header_bg;
border: $basic-border;
li {
display: inline-block;
margin: 15px 20px;
&:hover { // 这个地方
color: $font-hover-color;
}
}
}
}
同样会被解析为
.header-ul {
list-style: none;
color: white;
background-color: #cc6699;
border: 5px solid blue;
}
.header-ul li {
display: inline-block;
margin: 15px 20px;
}
.header-ul li:hover {
color: turquoise;
}
当然还有其他的选择器 >、+和~; 就不一一介绍了
在 scss 的嵌套中还可以属性嵌套,像这样
$style-none: none;
$header_bg: #cc6699;
$white: white;
$green: green;
$green: blue;
$basic-border: 5px solid $green;
$font-hover-color: turquoise;
$border-black: black;
.header {
&-ul {
list-style: $style-none;
color: $white;
background-color: $header_bg;
// border: $basic-border;
li {
display: inline-block;
line-height: 30px;
padding: 15px 20px;
color: $white;
cursor: pointer;
&:hover {
color: $font-hover-color;
border-bottom: { // 这个地方
style: solid;
color: $border-black;
size: 3px;
}
padding: 15px 20px 12px 20px;
}
}
}
}
3. 导入 scss 文件
在我们写 css 代码的时候有很多地方都会重复的代码,以导入文件的方式就方便太多了,传统的 css 怎么导入呢,一般都是直接在 HTML 中写入多个 link 标签,进行多个文件的引入,那么在我们的 scss 代码中怎么导入文件呢
@import './index.scss';
通过 @import 的方式进行导入文件,这样有什么的好处,传统的引入是多个 css 文件,会有向服务器发送多个请求,来获取这些 css 文件,而我们的 scss 文件这种导入,是把多个文件进行合并,合并为一个 css 文件,这样就减少了请求的次数.
那么在一个文件引入多个 scss 文件时,我们称这些文件是局部文件,而局部的文件也有命名规则,但是不一定非要按这个来,只是习惯,文件名以 _ 下划线开头,然后在跟文件名 'css/_demo-style.scss'; 那么我们引入的时候可以省略下划线
@import 'css/_demo-style'; // 需要注意的是要把文件后缀去掉
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 定义变量 */
@import './css/demo-style';
.header {
&-ul {
list-style: $style-none;
color: $white;
background-color: $header_bg;
// border: $basic-border;
li {
display: inline-block;
line-height: 30px;
padding: 15px 20px;
color: $white;
cursor: pointer;
&:hover {
color: $font-hover-color;
border-bottom: {
style: solid;
color: $border-black;
size: 3px;
}
padding: 15px 20px 12px 20px;
}
}
}
}
// _demo-style.scss
$style-none: none;
$header_bg: #cc6699;
$white: white;
$green: green;
$green: blue;
$basic-border: 5px solid $green;
$font-hover-color: turquoise;
$border-black: black;
一样有效果的
默认值
在导入的时候我们碰到相同的变量名的时候该怎么办呢? scss 提供了一个 !default 标签,它的作用就是,让引入的文件中有了这个变量,那么我们就用引入文件的变量,如果引入文件中没有声明这个变量的话,那么我们就用我们定义的默认值,它很像css属性中!important标签的对立面
// 还是上面的代码 下面加了一个一样的变量名
@import './css/demo-style';
$white: red !default;
用的还是局部文件的变量名 白色,并没有用到我们顶以的变量面 红色
4. 静默注释
在我们写了大量的代码时,为了方便查阅,我们一般都会写注释,而在 css 中注释的代码,在查看网页的时候可以看到 css 文件上的注释内容,有的时候我们不想让别人看到我们写的注释该怎么办呢,那么 scss 中提供了静默注释,格式跟原来的没什么区别,唯一的区别就是在编译成 css 代码的时候,不会被编译,会留在原代码中,这样就很好的解决了注释被查看的问题,我们想看的话,直接在 scss 文件中修改即可.
5. 混合器 (很常用)
网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。混合器使用 @mixin 标识符定义,后面跟变量的名字,这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式,使用的话就直接用 @include 混合器的名字
// 上面的代码一样
@import './css/demo-style';
$white: red !default;
@mixin disFlex { // 在这定义
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.header {
&-ul {
list-style: $style-none;
color: $white;
background-color: $header_bg;
@include disFlex; // 在这使用
li {
line-height: 30px;
padding: 15px 20px;
color: $white;
cursor: pointer;
&:hover {
color: $font-hover-color;
border-bottom: {
style: solid;
color: $border-black;
size: 3px;
}
padding: 15px 20px 12px 20px;
}
}
}
}
从代码可以看出,直接使用了一段代码,这个更大程度的减少了我们书写的内容,当然也可以直接定义一段css 代码来使用,当你发现有一段代码复用率很高的时候,那么你就可以使用混合器啦
很多时候我们想要自定义的混合器函数一样可以传参数该怎么办,很简单语法跟我们的 JavaScript 的函数参数差不多,只不过参数要以 $ 开头
// 上面代码一样
@import './css/demo-style';
$white: red !default;
@mixin disFlex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
@mixin link-colors($normal, $hover) { // 定义
color: $normal;
&:hover {
color: $hover;
border-bottom: {
style: solid;
color: $hover;
size: 3px;
}
padding: 15px 20px 12px 20px;
}
}
.header {
&-ul {
list-style: $style-none;
color: $white;
background-color: $header_bg;
@include disFlex;
li {
line-height: 30px;
padding: 15px 20px;
cursor: pointer;
@include link-colors(red, blue); //使用
}
}
}
当然我们也可以在接收参数的时候给默认的值
// 上面代码一样
@import './css/demo-style';
$white: red !default;
@mixin disFlex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
@mixin link-colors($normal, $hover: yellow) { // 定义 默认的参数值
color: $normal;
&:hover {
color: $hover;
border-bottom: {
style: solid;
color: $hover;
size: 3px;
}
padding: 15px 20px 12px 20px;
}
}
.header {
&-ul {
list-style: $style-none;
color: $white;
background-color: $header_bg;
@include disFlex;
li {
line-height: 30px;
padding: 15px 20px;
cursor: pointer;
@include link-colors(red); // 少传一个参数,使用默认值
}
}
}
还有一章是继承的 @extend .className 在这里就不多说了有兴趣的可以看下中文网 Sass中文网
6. 总结
本文介绍了sass最基本部分,你可以轻松地使用sass编写清晰、无冗余、语义化的 css.不管怎么说,很好的东西,推荐使用.
