Scss
介绍
官网 Sass又名SCSS,是CSS预处理器之一
- CSS 预处理器
通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、**函数(如右侧代码编辑器中就使用了变量$color)**等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
- 什么是Sass
Sass 是最早的 CSS 预处理语言,有比 LESS 更为强大的功能,不过其一开始的缩进式语法(Sass 老版本语法,后面课程会详细介绍 )并不能被大众接受,不过由于其强大的功能和 Ruby on Rails 的大力推动,还是有很多开发者选择了 Sass。
Sass 是采用 **Ruby **语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。
Sass和Scss
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
- 1、文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
- 2、语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(😉,而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
安装使用
- ruby 版本
ruby -v
ruby -v
如果输出 ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin20] 说明已经安装成功
- ruby 安装
brew install ruby
brew install ruby
- sass 安装
sudo gem install sass
sudo gem install sass
- sass 版本
sass -v
sass -v
Scss的语法
变量
声明变量
Sass 的变量包括三个部分:
- 声明变量的符号“$”
- 变量名称
- 赋予变量的值
普通变量与默认变量
sass 的默认变量仅需要在值后面加上 !default 即可。
sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。
// 编译前
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
// 编译后
body{
line-height:2;
}
// 编译前
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
// 编译后
body{
line-height:2;
}
变量的调用
// 定义
$width: 100px;
// 调用
body {
width: $width;
}
// 定义
$width: 100px;
// 调用
body {
width: $width;
}
局部变量和全局变量
// 定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
$color: orange !default;
.block {
// 调用全局变量
color: $color;
}
em {
// 定义局部变量
$color: red;
a {
// 调用局部变量
color: $color;
}
}
span {
// 调用全局变量
color: $color;
}
// 定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
$color: orange !default;
.block {
// 调用全局变量
color: $color;
}
em {
// 定义局部变量
$color: red;
a {
// 调用局部变量
color: $color;
}
}
span {
// 调用全局变量
color: $color;
}
在元素内部定义的变量不会影响其他元素。
全局变量就是定义在元素外面的变量
局部变量只会在局部范围内覆盖全局变量
嵌套
选择器嵌套
// 编译前
nav {
a {
color: red;
header & {
color:green;
}
}
}
// 编译后
nav a {
color:red;
}
header nav a {
color:green;
}
// 编译前
nav {
a {
color: red;
header & {
color:green;
}
}
}
// 编译后
nav a {
color:red;
}
header nav a {
color:green;
}
属性嵌套
属性前缀相同,后缀不一样,如font-,margin-,padding-**
// 编译前
.box {
font: {
size: 12px;
weight: bold;
}
}
// 编译后
.box {
font-size: 12px;
font-weight: bold;
}
// 编译前
.box {
font: {
size: 12px;
weight: bold;
}
}
// 编译后
.box {
font-size: 12px;
font-weight: bold;
}
伪类嵌套
借助&
符号完成伪类嵌套
// 编译前
.box{
&:before {
content:"伪元素嵌套";
}
}
// 编译后
.box:before{
content:"伪元素嵌套";
}
// 编译前
.box{
&:before {
content:"伪元素嵌套";
}
}
// 编译后
.box:before{
content:"伪元素嵌套";
}
混合宏
声明混合宏
在 Sass 中,使用“@mixin”来声明一个混合宏,{}里面是复用的代码
不带参数混合宏:
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
带参数混合宏:
@mixin border-radius($radius: 5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin border-radius($radius: 5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
复杂的混合宏:
// 加入了条件判断
@mixin box-shadow($shadow...) {
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
// 加入了条件判断
@mixin box-shadow($shadow...) {
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
调用混合宏
// 声明
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
// 调用
button {
@include border-radius;
}
// 声明
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
// 调用
button {
@include border-radius;
}
混合宏的参数
包含不带值的参数和带值的参数【默认值】
@mixin border-radius($radius: 5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(3px);
}
@mixin border-radius($radius: 5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(3px);
}
多个值
当混合宏传的参数过多之时,可以使用参数来替代
// 编译前
@mixin padding($padding...){
padding: $padding ;
}
.box-center {
@include padding(500px, 300px);
}
// 编译后
.box-center {
padding: 500px, 300px;
}
// 编译前
@mixin padding($padding...){
padding: $padding ;
}
.box-center {
@include padding(500px, 300px);
}
// 编译后
.box-center {
padding: 500px, 300px;
}
会产生多个对应的样式代码,造成代码的冗余
扩展/继承
// scss
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
// CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
// scss
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
// CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
在 Sass 中的继承,可以继承类样式块中所有样式代码,而且编译出来的 CSS 会将选择器合并在一起,形成组合选择器:
混合宏、继承和占位符
- 混合宏
生成代码不会合并
- 继承
生成代码会通过选择器合并【未使用代码会继续存在】
- 占位符
生成代码会通过选择器合并【未使用代码不会存在】
占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。
//SCSS中混合宏使用
@mixin mt($var){
margin-top: $var;
}
.block {
@include mt(5px);
span {
display:block;
@include mt(5px);
}
}
.header {
color: orange;
@include mt(5px);
span{
display:block;
@include mt(5px);
}
}
//SCSS 继承的运用
.mt{
margin-top: 5px;
}
.block {
@extend .mt;
span {
display:block;
@extend .mt;
}
}
.header {
color: orange;
@extend .mt;
span{
display:block;
@extend .mt;
}
}
//SCSS中占位符的使用
%mt{
margin-top: 5px;
}
.block {
@extend %mt;
span {
display:block;
@extend %mt;
}
}
.header {
color: orange;
@extend %mt;
span{
display:block;
@extend %mt;
}
}
//SCSS中混合宏使用
@mixin mt($var){
margin-top: $var;
}
.block {
@include mt(5px);
span {
display:block;
@include mt(5px);
}
}
.header {
color: orange;
@include mt(5px);
span{
display:block;
@include mt(5px);
}
}
//SCSS 继承的运用
.mt{
margin-top: 5px;
}
.block {
@extend .mt;
span {
display:block;
@extend .mt;
}
}
.header {
color: orange;
@extend .mt;
span{
display:block;
@extend .mt;
}
}
//SCSS中占位符的使用
%mt{
margin-top: 5px;
}
.block {
@extend %mt;
span {
display:block;
@extend %mt;
}
}
.header {
color: orange;
@extend %mt;
span{
display:block;
@extend %mt;
}
}
运算符
数学运算
+-*/
可以通过括号来修改他们的运算先后顺序
”/ ”符号被当作除法运算符时有以下几种情况:
• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。
// SCSS
p {
font: 10px/8px; // 纯 CSS,不是除法运算
$width: 1000px;
width: $width/2; // 使用了变量,是除法运算
width: round(1.5)/2; // 使用了函数,是除法运算
height: (500px/2); // 使用了圆括号,是除法运算
margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
}
// SCSS
p {
font: 10px/8px; // 纯 CSS,不是除法运算
$width: 1000px;
width: $width/2; // 使用了变量,是除法运算
width: round(1.5)/2; // 使用了函数,是除法运算
height: (500px/2); // 使用了圆括号,是除法运算
margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
}
变量运算
width: $width/2; // 使用了变量,是除法运算
width: $width/2; // 使用了变量,是除法运算
颜色运算
// before
p {
color: #010203 + #040506;
}
// after
p {
color: #050709;
}
// before
p {
color: #010203 + #040506;
}
// after
p {
color: #050709;
}
计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09
字符运算
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
p:before {
content: "Foo Bar";
font-family: sans-serif;
}
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
p:before {
content: "Foo Bar";
font-family: sans-serif;
}
如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。
Scss和Less的区别
...