sass的基本使用

 约 7 分钟

最近在项目中利用到了css预处理器(sass),而之前没接触过的本博主出于好奇心,就在业余的时间里搜了一些资料来看看,看完后觉得sass挺不错,就想简单的介绍一下sass的基本使用方法(ps:本文只介绍sass的一些基本使用,而这些内容都是本博主觉得比较有趣而且比较用得上的知识点)

- 1.sass的配置:

sass使用范围很大,如在vue的单组件文件中可以作为样式模板调用,react中也可以使用sass,而至于在vue,react中如何配置,本文不打算详细阐述,有兴趣的读者可以自行查阅。
本文所有的例子都是在webstorm中编译,而webstorm可以自行编译sass,具体可以查看该链接:
webstorm配置sass
- 2.sass的概念:

定义:sass是css的一种预处理器,文件后缀名为.scss,可以用webpack中的sass-loader来转成css样式。
ps:因为sass是基于ruby编写的,所以需要安装ruby后才能下载sass,才可以用;

- 3.sass的基本使用方法:

A)基本用法:

- 变量

语法:$变量名 : 变量值 ;
用途:在sass中,可以定义一些项目中常用的样式变量,如font-size,color,background-color等;
eg:

      $a:12px;
      .box1{font-size:$a;}
      .box2{font-size:$a + 2px}  

ps:sass中的所定义的变量不单只利用在样式值上,还能拼接字符串,动态改变属性的名称;
用法:#{$变量}
eg:

      $a:left;
      $b:#888;
      .box1{border-#{$a}-color : $b}

- 计算功能

在项目中,如果用到sass,定义变量时都会定义一些常用的值作为sass的变量,但如果在写样式时如font-size的值在常用变量中没有定义,那么可以利用sass变量的计算能力(加减乘除)

clipboard.png

- 嵌套

定义:若几个节点存在存在亲属关系,则在sass上可以用嵌套的方式来代替原css中的后代选择器;如果在嵌套中想调用父元素,则可以用&代替;

clipboard.png

- 媒体查询

在sass中@media可以不用写在外层,直接嵌套在对应的选择器里面写响应式;
eg:

clipboard.png

未改变之前:

clipboard.png

改变之后:

clipboard.png

B)复用:

- 继承

定义:在sass中允许一个选择器继承另一个选择器的全部样式;
语法: 选择器 { @extend 另一个选择器 }

eg:

clipboard.png

- mixin

定义:在sass中,可以利用@mixin来定义一个复用块,而且该复用块还能引入参数和参数的默认值。
语法:

 定义复用块  @mixin name (param1:default1 ,param2:default2,...){   }
 引用复用块  选择器{
                    @include name (val1,val2,...)
                  }

eg:
(mixin.scss文件)

clipboard.png

(调用文件)

clipboard.png

  • 插入文件

这个知识点在css中就已经存在,就是将css模块化处理,然后利用@import来调用;上面的例子就是利用了这个知识点,一般情况下,在项目开发过程中,也推荐这种做法。

C)高级用法:

  • 条件用法

定义:sass中可以像js一样采用条件判断语句选择性采用合适的样式块;
语法:

  @if (confident) { 样式块1 }
  @else { 样式块2 }

eg:

clipboard.png

注意:如果mixin中,有些参数有默认值,有些参数没有,则没有默认值的参数要放在参数列表的前面。

  • 循环用法

定义:sass中不仅仅可以用条件语句,还可以调用循环语句;sass中的循环语句有@for 和@while,用法基本一致。
语法: @for $i from start to end { 样式 } ,@while confident { 样式 }
注意:@for 是从start到end但不包含end;
eg:

clipboard.png
clipboard.png

clipboard.png

  • 自定义函数

定义:在sass中还能自定义函数,但必须要有返回值,而且要在调用前定义该函数。
语法:

  @function name () { return  }

eg:

clipboard.png

clipboard.png

clipboard.png

sass的内容远不止这些,如果看完本博客后也有兴趣继续深入学习sass,可以去看一下官方文档:
sass中文文档
官方文档

阅读 4.2k

推荐阅读

2623 人关注
174 篇文章
专栏主页
目录