您知道SASS吗?
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://blog.bitsrc.io/4-reasons-to-use-sass-in-your-frontend-project-bce88631c602
SASS是一种预处理器及样式表语言,由它们自己的工具或模块捆绑器(如webpack)编译成CSS。它有几个可以用来使CSS整洁和可重用的功能,例如变量,嵌套规则,mixin,函数等。
虽然如此,但以上的解释应该不足以向你说清楚SASS是什么,所以下面我将用一些内容来为你解释SASS是什么?它能做什么?
SASS使嵌套/分组CSS选择器和构建样式表变得更加容易
Sass通过在其中嵌套CSS类或选择器并在后台生成CSS使其成为可能。特别是当您遵循BEM体系架构 时特别有用,因为Sass与它的体系结构非常兼容,因此他们在文档中经常提到它。
它是一种更优雅、更酷的UI设计方式。使用Sass构建CSS也更加容易。如果你是一名网页设计师或经验丰富的前端网页开发人员,你可能会非常喜欢它,因为使用它会让你的工作效率直线上升。
Sass还使CSS代码更整洁,因为Sass会自动为您对CSS代码进行分组,并且也同样包含了代码嵌套。
以下这两个功能将帮助您更好地构建CSS:
您可以使用&符号连接CSS选择器
如果您使用的是BEM体系结构,请使用纯CSS进行编码:
遵循BEM(Block Element Modifier)架构的CSS代码
您可能已经注意到.button 这个类名,多次输入名为button的类名,可能会造成额外的精力浪费,而不是专注于.button有效地对类进行分组和样式设置。我发现做这件事既麻烦又乏味,特别是当我需要在重复命名CSS类或写选择器的时候。
现在如果你用sass来做这件事,它看起来是这样的:
上面的示例展示了SASS如何通过使用(&)将CSS选择器串联在({})中来嵌套几个选择器。如果您使用的是BEM体系结构,那么您就节省了一些需要重复输入CSS类和选择器来遵循该体系结构时间,因为SASS在后台已经帮您生成了完整的CSS了。
比较SASS和CSS这两种语法,它们的代码如下所示:
左: SASS 右:从SASS编译出的CSS
您可以使用SASS对父子选择器进行分组
Sass的另一个优点是,它还可以帮助您通过几行代码将选择器/类中的父子关系分组,就像您进行选择器连接的方式一样,只是添加了一个与号(&),您只需多加几个括号就能完成。
在纯CSS中,父子关系如下所示:
Sass是这样处理的:
并排比较,您可以看到这两者有很大区别:
就像选择符连接一样,使用Sass通过将CSS父子关系分组到括号中,自动为您生成CSS的嵌套父子关系。而且显然写出的代码更清爽、简洁。
它可以提高您的工作效率
曾经我对使用Sass持怀疑态度,因为我认为学习CSS的一个子集简直是浪费时间,更不用说我过去经常忽略CSS中引入的最新特性,比如Flexbox。但是,当我第一次尝试学习Sass时,我发现我的开发效率提高了,我在开发/设计我的组件时变得毫不费力! 我“遇到”它的时间还是太晚了。
对选择器分组并创建嵌套选择器时简直轻而易举,因为Sass自动的帮我们完成了大量的工作。我可以毫不夸张的说我比使用纯CSS设置样式快了2倍。总体的感觉就是“真香”。
您可以使用Mixins将CSS代码段重用到其他选择器
您不仅可以轻松地用更少的代码嵌套CSS选择器,而且可以重用一些代码片段来解决整个UI中的某些CSS问题。
Mixins可以帮助您做到这一点。这样,您可以避免在HTML元素中过多使用非语义的类。
举个例子,您在将UI居中对齐时遇到了问题,而且您不想在每个CSS选择器中都写一遍一模一样的代码。在这种情况下,您可以使用Mixins来解决问题。
下面通过一个示例来展示它的用法吧
在左侧,我们有mixin absCenter,使用@include将它包含在.sidebar
选择器中。生成的CSS中就会自动包括mixin的代码段了。
SASS会立即把mixin标识的部分识别为可重用的代码,并将其注入到声明需要引用它们的选择器/类中。
您可以使用Function指令定义复杂操作
您不仅可以通过使用Mixin重用代码,还可以为复杂的计算定义自己的函数!函数使您可以灵活地执行以下操作。
如果您有一些复杂的CSS,您可能想要自动化并减少冗余,您可以利用自定义函数的强大功能来实现这一点。
让我们继续为您演示一下:
结论
作为相对资深的前端开发者,我觉得如果您还没有用过Sass,那么建议您快用起来,因为它可能是您工作流程中的重要补充。如果您希望开始学习,可以通过该文档来开始学习。
您知道SASS吗?的更多相关文章
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- SASS教程sass超详细教程
SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...
- Sass之坑Compass编译报错
前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- Sass用法指南
写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...
- PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...
- Sass:初识Sass与Koala工具的使用
一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...
随机推荐
- Java equals和==的理解
一.简介 ==: == 比较的是变量(栈)内存中存放的对象的(堆)内存地址,用来判断两个对象的地址是否相同,即是否是指相同一个对象.比较的是真正意义上的指针操作. 1.比较的是操作符两端的操作数是否是 ...
- python 通过socket实现ssh功能
功能:实现从客户端向服务端发送cmd指令,服务端将结果返回给客户端的功能. #coding:utf-8 '''服务端''' import socket,os server=socket.socket( ...
- TabActivity中的Tab标签详细设置
参考链接: http://www.iteye.com/topic/602737 这个写的很不错,我是跟着一步步写下来的,不过到最后也遇到了麻烦,就是不能将Tab标签的文字和图片分开,始终是重合的,而且 ...
- 当学术邂逅浪漫 – 记MobiCom 2015大会
作者:微软亚洲研究院主管研究员 刘云新 今年的MobiCom大会在著名的浪漫之都巴黎举行.通常于欧洲举办的会议的参会人数会相对少一些,但今年的MobiCom大会吸引了近400人参加,绝不少于往年.浪漫 ...
- 14、创建/恢复ETH钱包身份
借助网上的一段描述: 若以银行账户为类比,这 5 个词分别对应内容如下: 地址=银行卡号密码=银行卡密码私钥=银行卡号+银行卡密码助记词=银行卡号+银行卡密码Keystore+密码=银行卡号+银行卡密 ...
- mongodb游标快照
示例代码 1. 初始数据 > db.snapshot_test.find() { "_id" : ObjectId("560ba37c694895b2de42254 ...
- cooking和session
## Cookie ## # 基本概念: >> 用于保存一次会话中的记录,存放在客户端(浏览器); |-- "一次会话" |-- 当客户端打开一个界面时 被称作一次会话 ...
- [译]HTML&CSS Lesson7: 设置背景和渐变色
背景对网站的设计有重大的影响.它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响. 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变色或者它们的组合.在我们决定如何 ...
- Win32 按钮嵌套收不到消息解决记录
太长不看 SetWindowSubClass,然后 return DefSubclassProc(hWnd, uMsg, wParam, lParam);,不要有 WS_CHILD 这个 Style. ...
- HTML5 基础知识(1)——基本标签
## HTML**概念**:是最基础的网页开发语言(Hyper Text Markup Langage 超文本标记语言) > 1.超文本:超文本是用超链接的方式i,将各种不同空间的文字组织在一起 ...