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

一.sass的基本概念

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

二. scss的安装步骤

1. 首先查询一下是否已经安装过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
版本有差别请忽略

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

npm install -g sass

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

sudo gem install sass

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

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

1. 关于版本 早期sass的后缀名是.sass 3.0版本以后, 后缀名改成了.scss 这种后缀使用的是css语法

2. 使用半自动化监听方法 这里是实现scss文件有变动,自动生成css文件

3. 首先要在项目目录中有两个文件夹, 一个是 scss ,一个是css. scss文件夹中存放sass文件, css文件夹中存放编译过后生成的css文件. 在sass文件夹中新建一个 page1.scss 文件 目录结构:

4. 在scss 和 css 文件夹的上层父级目录,打开cmd窗口 ,注意项目路径中不能出现中文,否则会报错 在 cmd 窗口输入

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

1. 在cmd执行命令

sass -w scss:css

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

四.sass的基本语法

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

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

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

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

样式如下图:

1. 父选择器
2. 变量的使用 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文件中
局部变量是写在某个选择器{}中的, 只有在{} 作用域内的选择器才可以使用局部变量

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

五. 混合&继承&占位符

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

六. 高级语法

1. 条件语句 @if(判断条件){条件为真时}@else{条件为假} @if(判断条件){条件1 为真时}@else if(判断条件2){条件2为真时}@else{以上条件均不满足时执行此处} 注意:第一条件判断在sass中不能使用& 或者 | 要使用关键词 and 或者 or 条件判断方式 > < >= <= !== == 这些都可以使用
2. 循环语句 @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