什么是SCSS?
SCSS是一种CSS预处理器,看起来更像是加了一些功能的 CSS。
CSS常用的预处理器:SCSS、Sass、LESS
SCSS诞生于Sass之后,Sass功能强大但采用缩进语法偏诡异,SCSS在Sass上进行升级使得语法上更类似LESS ,集合LESS和Sass两者的优点, 如无历史项目遗留原因,建议直接使用SCSS。
什么是CSS预处理器
通过引入更优的复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
重新定义了一种全新的专门的语言,再通过编译后生成CSS文件使用。
让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多好处。
你可以通过本教程并结合 SCSS在线编译工具 http://scss.jsrun.net 学习SCSS语法。
SCSS 常用语法
SCSS 嵌套规则与属性
嵌套是使用SCSS的重要原因 大多数时候,我们并不需要完全利用到SCSS提供的所有功能,本文将功能的常用度优先放在前面,并基于篇幅问题省略了一些功能的介绍,
但在你需要的时候你仍可以轻松在网络上找到这些功能介绍。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
将以上代码转换为 CSS 代码,如下:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
请结合SCSS在线编译工具 http://scss.jsrun.net 进行实践练习吧。
嵌套属性
很多 CSS 属性都有同样的前缀,例如:font-family, font-size 和 font-weight , text-align, text-transform 和 text-overflow。
我们可以使用嵌套属性来简化编写:
font: { //注意这个地方的冒号
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
转换CSS后会是什么结果呢?请结合SCSS在线编译工具 http://scss.jsrun.net 进行实践练习吧。
SCSS语法格式 使用变量
普通变量声明后可以在全局范围内使用;
默认变量仅需在值后面加上!default 即可;
默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式是在默认变量之前重新声明下变量即可。默认变量的价值在进行组件化开发的时候会非常有用。
scss代码:
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
转换CSS后会是什么结果呢?请结合SCSS在线编译工具 进行实践练习吧。
SCSS作用域
变量的作用域只能在当前的层级上有效果,如下所示 h1 的样式为它内部定义的 green,p 标签则是为 red。
$myColor: red;
h1 {
$myColor: green; // 只在 h1 里头有用,局部作用域
color: $myColor;
}
p {
color: $myColor;
}
转换CSS后会是什么结果呢?请结合SCSS在线编译工具 进行实践练习吧。
!global 关键字
p 标签的样式会变成 green
$myColor: red;
h1 {
$myColor: green !global; // 全局作用域
color: $myColor;
}
p {
color: $myColor;
}
转换CSS后会是什么结果呢?请结合SCSS在线编译工具 进行实践练习吧。
@import 指令
@import 指令可以让我们导入其他文件等内容。
CSS @import 指令在每次调用时,都会创建一个额外的 HTTP 请求。但,Sass @import 指令将文件包含在 CSS 中,不需要额外的 HTTP 请求。
Sass @import 指令语法如下:
@import filename;
注意:包含文件时不需要指定文件后缀,SCSS 会自动添加后缀 .scss。
此外,你也可以导入 CSS 文件。
导入后我们就可以在主文件中使用导入文件等变量。
以下实例,导入 variables.scss、colors.scss 和 reset.scss 文件。
@import "variables";
@import "colors";
@import "reset";
接下来我们创建一个 reset.scss 文件:
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
然后我们在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件:
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
将以上代码转换为 CSS 代码,如下所示:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Partials
如果你不希望将一个 SCSS 的代码文件编译到一个 CSS 文件,你可以在文件名的开头添加一个下划线。这将告诉 SCSS 不要将其编译到 CSS 文件。
但是,在导入语句中我们不需要添加下划线。
以下实例创建一个 _colors.scss 的文件,但是不会编译成 _colors.css 文件:
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
如果要导入该文件,则不需要使用下划线:
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
@extend 与 继承
@extend 指令表示一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同,只有少量的区别,则使用 @extend 就显得很有用。
以下实例中,我们创建了一个基本的按钮样式 .button-basic,接着我们定义了两个按钮样式 .button-report 与 .button-submit,
它们都继承了 .button-basic ,它们主要区别在于背景颜色与字体颜色,其他的样式都是一样的。
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
转换CSS后会是什么结果呢?请结合SCSS在线编译工具 进行实践练习吧。
使用 @extend 后,我们在 HTML 按钮标签中就不需要指定多个类 class="button-basic button-report" ,
只需要设置 class="button-report" 类就好了。
@extend 很好的体现了代码的复用。
Mixins
@mixin指令用于定义mixin。 @include指令用于在文档中包括混合。
Sass Mixins可帮助您制作要在站点上重复使用的CSS声明组。您甚至可以根据需要传递值,以使mixin更加灵活。
mixin可以存储多个值或参数,并可以调用函数以避免编写重复的代码。混合名称可以下划线和连字符互换使用。
让我们以边界半径为例。此示例指定如何在边界半径中使用mixin以便在您的网站中重复使用它。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
转换CSS后会是什么结果呢?请结合SCSS在线编译工具 进行实践练习吧。