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 四舍五入函