sass的基本使用

alighters 发布于2019-08-30 15:53 / 1413人阅读

摘要：本文所有的例子都是在中编译，而可以自行编译，具体可以查看该链接配置的概念定义是的一种预处理器，文件后缀名为，可以用中的来转成样式。

最近在项目中利用到了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变量的计算能力（加减乘除）

- 嵌套

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

- 媒体查询

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

未改变之前：

改变之后：

B）复用：

- 继承

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

eg:

- mixin

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

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

eg:
（mixin.scss文件）

（调用文件）

插入文件

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

C）高级用法：

条件用法

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

  @if （confident） { 样式块1 }
  @else { 样式块2 }

eg:

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

循环用法

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

自定义函数

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

  @function name （） { return  }

eg：

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

云服务器 GPU云服务器数据库的基本使用 linux基本命令的使用实验一云服务器的基本使用 python基本使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116615.html

sass的基本使用

摘要：嵌套可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。扩展继承可通过来实现代码组合声明，使代码更加优越简洁。运算可进行简单的加减乘除运算等颜色中集成了大量的颜色函数，让变换颜色更加简单。 1.变量 sass中可以定义变量，方便统一修改和维护。 //sass style //----------------------------------- $fontStack: Hel...

_DangJin 2019-08-30 13:48 评论0 收藏0
CSS 强化装备！Sass 安装与使用

摘要：不过必须要先安装，然后再安装。淘宝镜像安装由于国内网络原因你懂的，导致存放在上面的资源文件间歇性连接失败。嵌套可以进行选择器的嵌套，表示层级关系。重要注释管理项目文件结构预处理器的特点之一是可以把你的代码分割成很多文件，而且不会影响性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...

wuyumin 2019-08-28 18:19 评论0 收藏0
前端入门23-CSS预处理器（Less&Sass）

摘要：声明声明本篇内容梳理自以下几个来源网站的文档中文网感谢大佬们的分享。这个时候，预处理器就出现了，其实应该是说和这类语言出现了。声明本篇内容梳理自以下几个来源： Github:smyhvae/web Bootstrap网站的 less 文档 Sass中文网感谢大佬们的分享。正文-CSS预处理（less&Sass） CSS预处理什么是 CSS 预处理？为什么要有 CSS 预处理？这...

freecode 2019-04-23 13:07 评论0 收藏0
前端利器：SASS基础与Compass入门

摘要：在吸取了的一些特性基础上，有了大幅改进，也就是现在的。嵌套极大程度上降低了选择器名称和属性的重复书写。选择器嵌套选择器嵌套是指从一个选择器中嵌套子选择器，来实现选择器的继承关系。也已经成为的一个标配组件。 SASS是Syntactically Awesome Stylesheete Sass的缩写，它是css的一个开发工具，提供了很多便利和简单的语法，让css看起来更像是一门...

娣辩孩 2019-08-28 17:54 评论0 收藏0
开发一个自己的 CSS 框架（一）

摘要：当你改变一些基本配色之后，你会发现框架完全不同了。的变量以开头，赋值与相同，后面的代表它是可覆盖的。通过遍历字典，拿到和，设置相应的值即可。这是一个系列，带着大家封装一个纯 CSS 框架，从零学习 SASS 语法。代码仓库点我传送 showImg(https://segmentfault.com/img/remote/1460000015635558?w=221&h=202); 因...

funnyZhang 2019-08-30 15:54 评论0 收藏0