css预处理语言sass的环境安装和基础语法使用

sass号称:世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

这是官网说的  可以看出他的强大之处了

 

scss是一款强化css的辅助工具

scss与css有高度相似

添加变量，嵌套，混合，导入，函数等高级功能

这些高级功能让css更加的强大与优雅

浏览器无法解析运行scss文件，需要在服务器把scss文件转换成css

 

最常举的例子就是 如果你的项目写完了  突然有一天 你的项目经理让你把网站的所有的颜色换了 

代码文件少些还好说 但是有几十个css文件呢  那还不累死

这个时候就体现出来 sass的强大之处 如果你的样式使用sass写的话  直接在sass文件上 更改变量值 就可以实现了全部文件的颜色样式的替换了

如果你要使用sass的话 就有先安装sass的解析包 首先浏览器是不认识sass语言 他只能在服务器上运行 本地是不可以的

你先书写一个sass文件然后通过 node-sass解析生成一个css文件 最后你的项目引进生成的css文件就可以了

同样要注意的是 sass文件的 后缀名是 .scss   不要写错了   它并不像html文件后缀名就是html了

1.下面我们就可以来安装sass的解析环境了 首先你电脑上得node环境

需要有nodejs解释器   v8.11以上

2.在线安装 npm install -g node-sass

3.离线安装

  ①scss包，解压后4个文件

  ②找到nodejs安装路径，把上面4个文件复制进去

  ③cmd输入node-sass -v,弹出版本号，说明安装成功

2.scss文件转换成css文件 （在命令行窗口输入命令）

注意有的电脑可能不会执行成功 好像缺少 ruby语言环境 这个也没事去ruby官网 下载安装一下就可以 

能解析成功了就不用管了

①单文件转换

node-sass scss文件路径  保存的css文件路径 ex: node-sass scss/1.scss css/1.css

②多文件转换

node-sass scss文件夹 -o css文件夹 ex: node-sass scss -o css

文件监听也是一大特点 你只要写完sass语言 保存一下 他就自动帮你解析转换 不用你不停的敲命令

③单文件监听

node-sass -w scss文件 css文件 ex：node-sass -w scss/1.scss css/1.css

④多文件监听

node-sass -w scss文件夹 -o css文件夹 ex: node-sass -w scss -o css

3.scss基础语法

①.变量

使用$标识变量，变量名可以包括字母，数字，-  _,不能以数字开头

基本与css选择器相同，尽量做到见名知意

1.声明变量时，变量值可以引用其他变量

2.变量声明在{}外，整个scss文件都可以访问这个变量

      声明在{}内，只有这个{}内部才能访问这个变量

3. !default规则

   如果此变量在之前已经声明赋值了，那么使用之前的值

   如果此变量之前没有声明赋值，使用现在的值

②嵌套

4.根据html的嵌套结构编写scss

#content{
  font-size:16px;
  .top{
    border:1px solid #f00;
    h1{font-style:italic;}
    p{color:#f00;}
  }
  .bottom{
    border:1px solid #00f;
    p{
      color:#00f;
      a{text-decoration:none;}
    }
  }
}

生成的css如下

#content { font-size: 16px; }
#content .top { border: 1px solid #f00; }
#content .top h1 { font-style: italic; }
#content .top p {color: #f00; }
#content .bottom {  border: 1px solid #00f; }
#content .bottom p {color: #00f; }
#content .bottom p a {text-decoration: none; }

4.2.伪类的嵌套

  需要在:之前，添加占位符&。

  如果不添加，会生产一个空格，变成后代选择器

a{
  &:hover{background:#00f;}
}

3.群组的嵌套 nav,header,div,footer{   a{color:#f00;} } 生成的css nav a, header a, div a, footer a {  color: #f00; }

4.属性嵌套，使用较少 div{   border:{width:10px;style:solid;color:#ff0;} } 生成的css div {   border-width: 10px;   border-style: solid;   border-color: #ff0; }

 

1. 运算

+  -   /

运算的时候，scss会自动的转换单位，进行运算 但是前提是几个单位可以转换 in pt cm mm px % em rem 这些相对单位无法转换

①加法 +

字符串拼接的时候 如果用有引号的字符串去拼接无引号的字符串，结果是带引号 如果用无引号的字符串去拼接有引号的字符串，结果是无引号

②减法 -

由于变量名称中可以使用- 当减法前后有变量的时候，系统分不清楚 - 是属于变量名，还是单纯的做减法。所以，需要在减号前后添加空格，进行区分 width:$my_w - $my_h;

③除法

在scss中，  /  号作用，是除法和分隔符 在以下情况 / 会被解析成除法 1.如果计算式两边，有变量或者方法的返回值，视为除法 $width/2 2.被()包裹的计算式，视为除法 (500px/2) 3.除法运算式，是其它算术运算式的一部分 5px+8px/2px

5.颜色的运算

#rrggbb和rgb(r,g,b)都分段运算 红+红 绿+绿 蓝+蓝 rgb(11,22,33)+rgb(22,33,44)=rgb(33,55,77)   rgba的运算，要求参与运算的颜色的透明度必须相同

三.函数

1.可以直接在css语法中使用的函数

rgba(red,green,blue, alpha) hsl(hue,saturation,lightness) hue:色调     0~360 ( 0~120 121~240 241~360) saturation：饱和度 0.0%~100.0% lightness：亮度    0.0%~100.0%

2.数学函数

round($v)  四舍五入 ceil($v) 向上取整 floor($v) 向下取整 min($v1,$v2....) max($v1,$v2....) random() 随机数

3.字符串函数

unquote($str)  去掉$str的双引号 quote($str)    给$str加上双引号 to_lower_case($str)  变小写 to_upper_case($str) 变大写

4.自定义函数

@function add($a,$b){   @return $a+$b; } div{   width:add(100px,200px); }

四.指令

@if（）{ } @else if（）==moon{ } @else{ } 注意，指令中条件部分，小括号可以去掉

 

 

• 点赞
• 收藏
• 分享
• 文章举报

yunchong_zhao 发布了92 篇原创文章 · 获赞 64 · 访问量 5908 私信 关注