sass安装步骤、概述、基本语法等

SASS

sass的安装步骤
1）在cmd中输入 sass -v 或 sass --version 只要其中一个有版本号就不需要以下操作了。
2）在cmd中输入ruby -v ，查看是否有版本号
3）如果有版本号，如ruby 2.5.1等，说明环境中有ruby,直接用 gem install sass 安装。
如果是mac系统一般情况下自带ruby，使用sudo gem install sass
安装过程因版本不同可能需要选择，有的话可以选1
安装完成在cmd中 sass -v 出现版本号就是安装成功了
4）在cmd中输入ruby -v ，如果没有ruby版本号，则使用npm安装。
先检查是否有npm -v，有版本号出现，执行命令 npm install -g sass
安装过程因为版本不同可能需要选择，有的话可以选1
5）安装完sass之后，在cmd中输入 sass --version检查是否有版本号，有就是安装成功
6）如果 npm install -g sass安装失败，可以尝试先安装ruby
安装包是FTP中day21目录下的 rubyinstaller-devkit-2.4.10-1-x64.zip
7） ruby软件安装完成后，在cmd中输入 ruby -v 查看版本号，有的话ruby就安装成功了
8）安装ruby后，在cmd输入： gem install sass 安装sass
总结：能用npm装sass就用npm装，装不上就先装ruby,用ruby来装sass
如何证明安装成功了？
命令1 sass -v
命令2 sass --version
使用以上任意一个命令，出现以下几种情况任意一种都是装好SASS了
1.52.1 complied with dart2js 2.17.1
ruby 1.52.1
Ruby Sass 3.7.4
版本有细微差别没关系
sass简介
我们平时写样式使用的是CSS，sass是CSS"预处理器"，是一种专门的CSS编程语言
增加了变量、函数、计算、嵌套关系等等的语法
可以让CSS编写更便捷，清晰
预处理器，除了sass还有其他的，比如less、stylus,使用方法大同小异
sass不能直接使用，需要进一步编译过程
比如我有一个1.sass文件，这个文件需要通过编译过程变为1.css文件
然后这个编译好的1.css文件再被index.html引入渲染效果
编译
sass的语法和版本
npm install sass -g 是安装sass的命令
.sass是文件后缀名 3.0版本之前一直使用的是它，文件编辑语法严格
3.0版本后，后缀名改成了.scss 这种后缀使用的是CSS语法，学习成本大大降低
所以软件的名字不可以改，还是sass,但是文件后缀名改成了.scss
步骤
1. 在day22code下创建项目文件夹test
2. 在test文件夹中创建预处理文件夹scss,用于存放我们编写的.scss文件
3. 在test文件夹中创建css文件夹，用于存放编译后生成的.css文件
4. 在scss文件夹下创建1.scss文件，写一句代码 body { background-color:#f00; }
5. 打开test目录对应的cmd窗口
6. 在test目录下的cmd窗口输入命令 sass scss/1.scss:css/1.css后回车
  执行sass命令 scss/1.scss源文件 :表示生成 css/1.css编译后生成的目标文件
7. 查看css文件夹下是否有内容生成，且内容包含1.scss文件中的css代码
  注意：执行命令后在css文件夹下生成的文件可能有多个，没有关系，只要有1.css且内容有可以了
  监听整个文件夹进行编译
  sass -w scss:css
  -w 表示watch监听的含义，也就是说，只要scss文件夹有变动，就立即编译到css文件夹中，这样就实现了半自动化
  那这样我们修改scss文件的内容就可以同步生成到css文件中
  注意：如果当时没有编译成功，按一下Ctrl+C
  按两次Ctrl+C就是退出监听，重新执行上面的命令才能再次监听

3 sass规则
5. 注释规则
因为大家安装的版本不一样，所以有的同学写中文注释可能会报错或者乱码
在这里不要出现中文，容易有坑！
/**/ CSS的注释方式，sass中是可以使用的，并且可以编译到CSS文件中
6. 嵌套规则
要按照HTML结构的嵌套关系，在scss文件中使用{ }嵌套着来写选择器
这样编译的时候就会按照嵌套的结果编译生成对应的CSS
好处：结构非常清晰，不用写很多选择器，还不用计算权重值的问题
易错点：
7. 编译路径是否是scss与css文件的上层文件夹test
8. 出现的路径中不要出现中文
9. 编译的过程受电脑性能的影响，有的电脑编译的比较快，有的慢，这个很正常
10. 如果两次测试不行，建议把cmd窗口关闭，重新再监听一次

4 sass的基本语法

变量的使用

为什么要用变量？有什么作用？
比如企业需要设置主题色，比如京东红，假设改版时需要将企业色更换，这时只需要改一个颜色的变量值就可以改掉全局的颜色，无需大量更改了
全局变量与局部变量
全局变量是直接写在scss文件中的，而局部变量是写在某个选择器{}中的
注意：变量在哪里声明，就在哪里使用，局部变量不可以被其它的外部选择器使用
变量的加载和读取顺序
必须要先定义变量，才能使用变量，否则会编译报错:
Undefined Variable未定义的变量

计算功能【了解】

注意：虽然sass提供了变量计算的功能，但是由于系统I/O调用顺序，导致有的电脑可以快速计算并编译，有的报错或者直接不编译
所以我们尽量不要使用sass来进行变量的计算，如需计算，推荐使用JS
父选择器

在sass源码中，使用&就代表它的上一层父级选择器
在嵌套写法使用中，我们经常使用&来给父选择器进行占位
这样写就可以搭配伪类、伪元素一起使用，确保生成的选择器结构是正确的

/*.box>ul>li>a*/
.box {border: 1px solid #000;ul {list-style: none;li {height: 30px;a {text-decoration: none;}//方案2：使用&号，&就表示父级li,表示给父选择器占一个位置//注意：不加&是不行的，因为:hover前会多生成一个空格，伪类无效&:hover {background-color: #00f;}}/*方案1*/ // li:hover {//    background-color: #f00;// }}
}

插值语句

上面我们学习到，变量可以保存css的值，但是我们不可以直接使用变量名作为选择器的名字，如果想要在CSS中使用SASS变量，就需要用#{ }包裹变量名，才可以使用，否则会报错。
格式： #{ 变量名 }

//.nav-item { }
//.list-item { }
//.carousel-item { }
$abc:10px;
$daohang:nav;
$liebiao:list;
//这样写会报错，因为$daohang会被看作是字符串而不是变量名
/*.$daohang-item { }*/
//给$daohang外加一层#{ }作为变量名就不会报错了
.#{$daohang}-item { }
.#{$liebiao}-item { }

混合指令
混合指令的语法
@mixin 指令名创建混合指令的语法
@include 指令名使用混合指令的语法
注意：指令名是自定义的，但注意不要用数字开头
注意：如果指令有参数，传参顺序必须与定义顺序一致
继承
效果：一个元素使用另外一个元素的全部样式，注意：继承不可以选择
@extend 要继承的选择器名表示使用继承，注意：选择器要写全
继承会在编译之后形成群组选择器，更加优化
如果要继承多个选择器，使用逗号连接即可
占位符选择器%
如%juxing这是一个选择器，其它元素可以选择继承此选择器的样式
但注意，拥有%占位符的选择器是不会被编译到css文件中的

%juxing {width: 120px;height: 40px;
}
.box5 {@extend %juxing;
}

编译后生成的内容：

.box5 { width: 120px; height: 40px; }

高级语法
条件语句
@if(判断条件){条件为真时}@else {条件为假}
@if(判断条件1){条件1为真时}@else if(判断条件2){条件2为真时}@else{以上条件均不满足执行这}
注意：多条件判断在sass中不能使用& | 要用关键词 and or
条件判断方式> < >= <= !== ==等等这些都可以用
循环语句
@for $i from 1 to 5 { }
@for 表示使用for循环
$i 表示控制循环的循环变量i
for循环每循环一次自增1，没有JS的for循环那么丰富，只能自增1
from 1 to 5 表示1到5 但注意：不包含5
from 1 through 5 表示1到5 但注意，包含结束值5

sass安装步骤、概述、基本语法等相关推荐

在VUE项目中使用SCSS，从安装步骤到语法说明，带你快速入门！！
最近在做VUE项目时用到了SCSS ,在这里总结一下SCSS在项目中是如何使用的. 首先要了解什么是SCSS? SCSS是一种CSS预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件 ...
sass 安装配置和使用
一.什么是SASS SASS在CSS的基础上做了一些扩展,使用SASS你可以使用一些简单的编程思想进来编写CSS.比如,SASS中可以定义变量.混合.嵌套以及函数等功能.只不过SASS不像CSS,可 ...
python仿真搭建_仿真秀学院|从零开始学ANSA二次开发：如何利用Designer搭建窗口，含安装步骤...
原标题:仿真秀学院|从零开始学ANSA二次开发:如何利用Designer搭建窗口,含安装步骤作者 | 团长仿真秀专栏作者首发 |仿真秀App 导读:大家好,我是团长,是一名CAEer,还是一名C ...
Pycharm 2018安装步骤详解
安装步骤: 安装前先关闭杀毒软件和360卫士,注意安装路径不能有中文,安装包路径也不要有中文. 试装系统:win10 64bit 1.解压安装包. 2.以管理员身份运行安装程序. 3.点击NEXT. ...
Apollo进阶课程㊴丨Apollo安装过程概述
原文链接:进阶课程㊴丨Apollo安装过程概述 Apollo是一个自动驾驶的平台,推荐的参考运行环境为:ThinkPAD X240.CPU:i5 .四核 .内存 8G. 硬盘容量40G以上. 上周阿波 ...
RedHat Enterprise AS4安装步骤
//因RDMS使用新版本CentOS6.2 有问题 , 没办法只有装低版本操作系统 ! 概述 Redhat公司的Enterprise Linux AS系列 (以下简称AS系列),其中Fedora Co ...
mysql安装注意步骤,mysql安装步骤
mysql安装步骤 1.在官网下载对应的压缩文件,放到本地文件夹下,解压缩. 2.配置Path环境变量:新增mysql的bin文件夹路径,C:\software\mysql-8.0.23-winx64 ...
matlab bdir 排序,Matlab 2020b介绍及下载安装步骤
文章目录 1. 按2. 产品介绍3. 安装要求4. 安装步骤5. 下载地址1. 按 MATLAB下半年版本R2020b来了此版本较上半年有了新的产品及功能更新 APP Designer更好用 .MA ...
Sass 安装到使用
sass学习 Sass 可以通过以下三种方式使用:作为命令行工具:作为独立的 Ruby 模块 (Ruby module):或者作为 Rack-enabled 框架的插件(例如 Ruby on Rail ...

sass安装步骤、概述、基本语法等

SASS

sass安装步骤、概述、基本语法等相关推荐

最新文章

热门文章