sass

梓旭 • • 编程

sass

  • 什么是sass，目前市场上三大css 预编译语言之一

    sass less stylus

    • 什么是css预编译语言：可以以语言的形式书写css样式（css不是语言，是css样式表）

    • css预编译语言不能直接在浏览器中运行，需要编译成css文件以后运行，这样我们就需要将一个叫sass的工具将sass编写的代码编译成.css文件，将我们写的.sass文件转换成.css文件去浏览器运行

    • 了解sass的文件形式

      • .sass 后缀的文件 和 .scss 后缀的文件都是sass文件，这两个文件在语法上没有区别，写法一样，只是.sass 没有大括号的分号，全部依靠缩进保持关系（这是以后css发展的趋势，但是现在支持的还不是很好）

        .sass 文件
    div
        font-size：19px
        color：red

      • .scss 文件，就是你怎么写css就怎么写

使用sass的原因：css没有很好的计算能力，代码冗余，不便维护，不利于复用

sass的注释

  • 单行注释 //开头 后面书写注释，会在编译的时候被忽略掉，开发注释

  • 多行注释 /* 注释的内容 */ 快捷键：shift + alt + A

    会在编译的时候被保留下来，但是打包的时候被忽略掉

    打包，就是压缩文件，没有换行空格等

  • 强力注释

    /*！ 注释的内容 */

    在注释的开始写一个感叹号！，会在编译的时候保留下来，将来打包的时候也会保留

sass变量使用$符号

  • 定义变量，在sass中可以定义一些变量，后期可以统一使用修改

$变量名：value;
--
$color1:red;
$abc:left;

sass变量可以存储的信息：字符串，数字，布尔值，颜色值，列表，null

在变量中可以引用其他的变量，在编译后的css文件中使用变量的地方会被替换成变量的值

  • 在变量定义时剪号和下划线可以交替使用，即两者之间没有严格的区分

  • 1:使用变量，直接使用在值的位置

    div{
color:$color1;
}

    2:在样式名或者选择器上使用，使用插值表达式

    相当于把变量的值插入到另一个内容中，格式为：把变量使用#{ }包裹起来

    div{
 margin-#{$abc}:100px;
}

使用变量的地方，将来一旦变量修改，每一个使用变量的位置都会改变

嵌套

1:嵌套选择器

div{
 width:100px;
 p{
  width:10px;
  a{
    color:#ddd;
  }
 }
}

在嵌套选择器中调用父选择器 使用&符号

div{
    &:hover{
        color:red;
    }
}

2:嵌套属性

和选择器没有关系和属性名有关系，前提是：属性名中带有中划线（-）的才可以嵌套

属性名: 后要加空格

font: {
 size:14px;
 weight:4;
}
​
等同于:
font-weight:4;
font-size:14px;

混合 @mixin. @include

格式：在定义mixin的时候可以使用其他的sass特性 比如说嵌套

@mixin 名字{
        样式声明
}
@mixin 名字 (参数名1,参数名2){
        样式声明
}
​
调用时
div{
  @include 名字;
}
div{
  @include 名字(实际参数1,实际参数2);
}
掉用时参数的顺序要和定义时参数顺序一致
@mixin all {
	color:red;
	p{
	 font-size:24px;
	}
}
div{
	@include all;
}


等同于
div{
	color:red;
	p{
	 font-size:24px;
	}
}

extend 继承

作用：一个选择器与另一个选择器的样式几乎一致，只有少量区别时，可以采用继承，让样式a继承样式b的样式

让一个选择器A继承另一个选择器B的内定义的所有样式及与B相关的其他样式

.button-A  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-B  {
  @extend .button-A;
  background-color: red;
}

.button-C {
  @extend .button-A;
  background-color: green;
  color: white;
}

后两个样式继承样式A  编译后式并集选择器
等同于：
.button-A,.button-B,.button-C {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-B  {
  background-color: red;
}
.button-C{
	  background-color: green;
  color: white;
}

@import 和Partials

在css中支持使用@import引入其他css文件，但是css每次在调用@import指令时都会向服务器发送一次http请求，很消耗资源。但是使用sass的@import指令将引入sass时不会发送http请求，将所有的sass文件最终编译成一个css文件。

在一个.scss文件中引入另一个.scss文件时使用

@import "被引入的文件名";

  • 引入文件时不需要加文件的后缀名，sass会自动添加.scss后缀

  • 如果你不希望将一个sass文件编辑成一个css文件，要在创建被引入的文件名前加一个下划线_ 这样sass不会将其编译成css文件

    即给文件命名时名字前要加下划线. _style-box.scss

  • 在@import引入文件时不用加下划线

sass函数

乘法：（不可以单位不同）
width：100px*2

除法：（不可以单位不同，除法为了和css样式表中的/区分，所以书写格式要格外注意）
$width:1000px;
width：$width /2; //使用变量，是除法运算
width：round(1.5)/2;  //使用函数，是除法运算
height：（500px /2）; //使用圆括号，是除法运算
height：20px+100px/2px;  //使用了加号，是除法运算

变量计算，加减乘除都可以
$width1:100px;
$width2:200px;
$width3:300px;
width:$width1+$width2-$width3;

处理数字的函数

  • abs(-10px) 返回结果是 10px 绝对值函数

  • round(3.5) 返回结果是 4 四舍五入函

梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录