scss安装入门到使用高级语法

一.sass的基本概念

sass是css的"预处理器", 一门专门的css编程语言
增加了变量, 函数, 计算, 嵌套关系等用法,让css编写更简洁, 清晰.

二. scss的安装步骤

首先查询一下是否已经安装过sass, 在cmd中输入sass -v 或者 sass --version

sass -v

sass --version

使用上面任意一个命令,出现以下几种情况都是已经安装好了
1.52.1 complied with dart2js 2.17.1
ruby 1.52.1
Ruby Sass 3.7.4
版本有差别请忽略

如果没有出现版本号,那就在cmd中执行命令

npm install -g sass

如果是Mac电脑,电脑会中自带ruby,也可以使用ruby安装

sudo gem install sass

安装完成后执行第一步,再查看一下版本号,有版本号就安装完成了.

三.sass的版本和半自动化监听

关于版本
早期sass的后缀名是.sass
3.0版本以后, 后缀名改成了.scss 这种后缀使用的是css语法
使用半自动化监听方法
这里是实现scss文件有变动,自动生成css文件

首先要在项目目录中有两个文件夹, 一个是 scss ,一个是css. scss文件夹中存放sass文件, css文件夹中存放编译过后生成的css文件.
在sass文件夹中新建一个 page1.scss 文件
目录结构:
在scss 和 css 文件夹的上层父级目录,打开cmd窗口
,注意项目路径中不能出现中文,否则会报错
在 cmd 窗口输入

sass scss/page1.scss:css/page1.css

在cmd执行命令

sass -w scss:css

-w 表示 watch 监听的含义, 就是只要scss文件夹有变动, 就立即编译到 css 文件夹中,这样就实现了半自动化
如果我们修改scss文件的内容就会自动同步生成到css文件中
如果监听的命令没有执行成功,可以按ctrl + c 退出

四.sass的基本语法

到这里终于可以开始写sass代码了,首先学习基本语法.

嵌套规则
按照html结构的嵌套关系,在sass文件中使用{}

// 例如:有一个html结构 .box>a
注意:因为安装版本不同,有的在scss文件中写中文注释会报错,尽量不要使用中文的注释

.box {border: 1px solid #000;a{text-decoration: none;}
}

样式如下图:

父选择器
变量的使用
a. 变量的读取顺序

$a:100px;
$b:center;
$c:#f00;
$zts:#0aa1ed;
div {width: $a;height: 100px-10px;text-align: $b;color: $c;background-color: $zts;//border-color: $hello;$hello: green;p {background-color: $hello;}
}

b. 变量有作用域
全局变量直接写在scss文件中
局部变量是写在某个选择器{}中的, 只有在{} 作用域内的选择器才可以使用局部变量

计算功能
一般不推荐用sass计算, 推荐用js计算
因为使用sass计算的过程中,有的电脑可以计算并编译,有的会报错或者直接不编译
原因是系统I/O 读写调用顺序导致的
例如,使用除计算时,会编译成以下错误代码:
插值语句
格式: #{变量名}
我们不能直接用变量名作为选择器的名字,
如果需要使用变量名,就需要使用#{}包裹变量名, 才可以使用, 否则会报错

五. 混合&继承&占位符

混合指令的语法
@mixin 创建混合指令的方法, 指令的自定义明不能以数字开头
@include 使用混合指令的名字
继承
一个元素使用另一个元素的全部样式,注意! 是全部样式, 继承不可以选择部分样式
@extend 继承的规则,继承规则后面放的是要继承的选择器名字, 注意选择器要写全, 继承会在编译之后形成群组选择器, 使代码更加优化
继承多个选择器可以用逗号连接多个选择器的名字
占位符选择器%
占位符选择器的样式可以被继承走,但是占位符不会被编译,类似泛型语法

六. 高级语法

条件语句
@if(判断条件){条件为真时}@else{条件为假}
@if(判断条件){条件1 为真时}@else if(判断条件2){条件2为真时}@else{以上条件均不满足时执行此处}
注意:第一条件判断在sass中不能使用& 或者 | 要使用关键词 and 或者 or
条件判断方式 > < >= <= !== == 这些都可以使用
循环语句
@for $i from 1 to 5{ }
@for 表示for循环
$i 表示循环变量i
注意:这里的for循环,变量每次只能自增1
form 1 to 5 :表示从1到5,但注意不包含5

@for $i from 1 through 5 { } 跟上面类似,区别是这里包含结束值5