sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sass的设计思维——Don't Repeat Yourself。这一篇将阐述Sass如何利用变量、选择器嵌套、混合器和选择器继承来帮我们又快又好地搞定CSS。
零. Sass的作用是什么?
Sass的作用是,帮助我们更快地(又快)写出具有高可维护性(又好)的CSS代码。
直白点说就是,用了sass,写起样式来,脚步带风,效率提升,另一方面,sass在保证你“车速”的同时,还尽量减少你“翻车”的概率,你的样式代码将变得具有更多的条理性,更少的啰嗦重复,修改起来也变得简单高效,不用ctrl+F
查找然后替换所有,所以总结起来就是“又快又好”。
接下来我们就先来看一下sass是怎么解决冗余问题的,涉及到具体的语法,日后再详细展开。
一. 冗余有什么问题?
/*冗余的样式表*/
h1#brand {
color:#1875e7;
}
#sidebar{
background-color:#1875e7
}
ul.nav{
float:right;
}
ul.nav li{
float:left;
}
ul.nav li a{
color:#111;
}
ul.nav li.current{
font-weight:bold;
}
#header ul.nav{
float:right;
}
#header ul.nav li{
float:left;
margin-right:10px;
}
... ...
Sass可以消除样式表中的冗余,那么冗余有什么问题,我打字快,我不怕冗余,是不是这样?
冗余的问题在于太妨碍效率,分开来说就是两个问题:
- 写起来费劲,不断重复写选择器,不断重复写相同的css规则,不断重复地写属性值(比如某个颜色、某个大小值等);
- 改起来要疯,一旦一个地方的属性值要改,往往要找到很多处都要改,而且如果是有关联的属性,比如某个颜色是根据另一个颜色值计算得到的,一旦改前一个颜色,后面的颜色也要改,这个时候因为值不一样,并不能简单的
ctrl+F
查找去全局替换。
这样的冗余问题多了,你的样式表,你自己都会看着心烦,因为很容易出错。
二. 复用属性值——变量
还记得刚学C的时候,算圆周长和面积,老师说,我们首先去定义一个常量P=3.14,这样如果以后要算更精确的,就可以这里把“3.14”改成“3.14159”就可以了,不然就要去找到算式去一处一处改。
Sass让我们的写样式也可以用变量,可以把任意的属性值赋给变量,在一个地方(一般是你的样式表靠前的位置)管理散落在各处的属性值。
举个场景,想象一下,你正在写一套站点主题,包含5个主要颜色,其他任何元素的颜色都是从其中直接或者计算(间接)得到,所以这些以“#”开头的颜色值遍布你的样式表各个地方,可能运用于某处的span
标签内的文字颜色,可能运用于某处的div
的背景,这个时候你想要修改配色尝试一下,常规地直接在CSS样式表上更改,你得改疯,改完还一直怀疑,我是不是漏了哪里,而用sass只需要在开头定义颜色变量值的地方,集中更改就可以了,这样的更改,两相比较,效率不是一个量级的。
$text-color-info:#121212;
.txt{
color:$text-color-info;
}
sass的变量名规范是这样的,以$
开头,可包括所有可用于CSS类名的字符,包括下划线和中划线,而且方便的是,变量名中并不区分中划线和下划线,比如 $pretty_girl
和 $pretty-girl
是一样的,没差。
三. 快速写出多层次选择器——嵌套
多层次选择器的问题在于重复写选择器,或者不断地ctrl+c
然后ctrl+v
,然后可读性也不强,尤其是不按一定次序写,最后修改起来很不方便,比如把下面的类名"nav"改成"navg",就需要改所有的“.nav”选择器。
ul.nav{
float:right;
}
ul.nav li{
float:left;
}
ul.nav li a{
color:#111;
}
Sass利用选择器嵌套来帮我们解决上述问题,如果用嵌套选择器来写,上面的几条CSS会变成这样:
ul.nav{
float:right;
li{
float:left;
a{
color:#111;
}
}
}
条理性很清楚(当然条理性和可读性永远和程序猿的代码编写习惯相关),没有选择器的冗余,修改起来也会非常方便。
四. 复用一段样式——混合器
不停地要用到一段样式,这样的情景也是很常见的,比如我们要为警示性的提示信息写一段样式:
.danger-note{
font-size: 10px;
color: #e22;
}
然后在html文档里,当需要警示性的提示时,我们把类“danger-note”加到某一个标签上,然后它就有这样的样式了,哪里需要就去哪里加这个类,这是我们常规的做法。
那么,这样做法有什么问题呢,这样的问题在于类名一般具有语义,如何保持语义的同时还能复用代码?此外,我们如果在CSS中提炼出某段需要复用的代码,我们需要创建一个类选择器,然后回到html文档里,去该去的地方加上这个类。
而Sass是怎么帮助我们复用一段样式的呢?再说回到学C的时候,有个东西叫“宏”,“宏”就是一个占位的标志,用一开始定义的内容去替换代码中的“宏”标志,其实Sass中的混合器也是差不多的。
我们可以这么去定义一个混合器,以@mixin
开头,后跟一个混合器名字,然后是CSS规则:
@mixin danger-note{
font-size: 10px;
color: #e22;
}
然后我们就可以用@include
随时复用这一段代码了:
#notice{
text-align:center;
@include danger-note;
}
更强大的是,混合器和变量的结合使用,可以使混合器带参数,用参数来决定使用什么样式,amazing,简直和“函数”一样。
/*定义混合器*/
@mixin danger-note($col:#e22){
font-size: 10px;
color: $col;
}
/*使用混合器*/
#notice{
text-align:center;
@include danger-note(#d33);
}
上面的混合器带了一个参数用于决定颜色值,具有一个默认值#e22
,也就是引入混合器不指定参数就用默认值,这里我们传入参数#d33
,这样我们的颜色最终是d33
。
五. 避免重复属性——选择器继承
这可能是sass相比于上面的特性中最不好理解的特性了,我们已经了解可以用混合器来复用一段样式,但由于混合器被看做一个“宏”,所以其实是相同的一段代码被添加到不同的地方了,必然这是会有重复和冗余的。
@mixin note{
font-size: 10px;
text-decoration: underline;
}
.danger-note{
color:#e22;
@include note;
}
.info-note{
color:#2e2;
@include note;
}
输出的CSS是这样的:
/*注意看里面重复的样式代码*/
.danger-note{
color:#e22;
font-size: 10px;
text-decoration: underline;
}
.info-note{
color:#2e2;
font-size: 10px;
text-decoration: underline;
}
上面的代码首先定义一个note
混合器,描述了字体大小和下划线样式,然后警告信息和常规信息引入这个混合器,各自的颜色又是独立设置,看上去没有什么问题,但是这样输出的CSS代码将造成冗余,因为都混入了note
混合器的规则。
而且,这里的规则具有强烈的层次关系,因为不管是警告信息还是常规信息,都具有note
混合器定义的样式,只是两者的颜色不同,所以Sass引入了选择器继承。
选择器继承,让一个选择器能够复用另一个选择器的所有样式,但又不重复输出这些样式。
.note{
font-size: 10px;
text-decoration: underline;
}
.danger-note{
color:#e22;
@extend .note;
}
.info-note{
color:#2e2;
@extend .note;
}
输出的CSS是这样的:
.note, .danger-note, .info-note{
font-size: 10px;
text-decoration: underline;
}
.danger-note{
color:#e22;
}
.info-note{
color:#2e2;
}
可以看到,当用@extend
继承.note
的样式时,.danger-note
和.info-note
也完全套用了.note
的样式,而且你会发现,规则并没有被重复输出,而且这样的方式更符合我们对于这几个选择器的认知(如果你之前用过面向对象编程的话)。
而有时候我们其实并不需要父类在输出文件中输出(是不是很像抽象类),这个时候我们可以用占位符(以%开头),比如上面的例子:
%note{
font-size: 10px;
text-decoration: underline;
}
.danger-note{
color:#e22;
@extend %note;
}
.info-note{
color:#2e2;
@extend %note;
}
生成的CSS:
.danger-note, .info-note{
font-size: 10px;
text-decoration: underline;
}
.danger-note{
color:#e22;
}
.info-note{
color:#2e2;
}
你会发现输出的CSS中没有为note
输出,占位选择器能把常用的样式保存在一处,且不影响任何一个类名,可以放心使用。
至此,我们了解到Sass的四大特性:变量、选择器嵌套、混合器和选择器继承,并且了解它们是怎么帮助我们减少编写样式表时的冗余和提高我们的效率和质量的,你可以暂时不去了解细节,毕竟这一篇只是想告诉大家Sass是怎么发挥作用的,接下来我们再仔细去探索下sass的语法,看sass到底是怎么写的、有什么注意事项和一些这里还没讲到的技巧。
sass笔记-1|Sass是如何帮你又快又好地搞定CSS的的更多相关文章
- sass笔记-3|Sass基础语法之样式复用和保持简洁
上一篇详述了Sass如何嵌套.导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定 ...
- sass笔记-2|Sass基础语法之让样式表更具条理性和可读性
这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后 ...
- sass笔记-4|像写脚本一样写Sass,把能交给Sass办的都交给它
Sass笔记关于sass的基础部分已经写完,这一篇介绍Sass的高级特性--脚本特性.Sass能做很多事让样式表更智能,我们先会看到Sass眼中的数据类型,在这些数据类型上会有可进行的操作,此外,Sa ...
- Sass 笔记
Sass 笔记 1. 安装,依赖Ruby sass依赖Ruby, 所以Windows要先安装Ruby, Mac自带无需安装 $ gem install sass 2. 两种文件格式 sass scss ...
- 学习Sass笔记之概念篇
1 什么是CSS预处理器 首先我们了解一下什么是CSS预处理器:通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用.CSS 预 ...
- 学习笔记:SASS
SASS: http://www.sass.hk/sass-course.html SASS 2015-10-10 http://sass.bootcss.com/docs/sass-referen ...
- 项目使用gulp的配置编译sass笔记
Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版 ...
- 学习Sass之安装Sass(一)
为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...
- 学习Sass之安装Sass
学习Sass之安装Sass 为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE ...
随机推荐
- hibernate_validator_10
约束条件组合--把多个约束组合成一个约束 上一节中我们自定义的@CheckCase是用来检查是否String为大写的注释,默认情况下当我们的String为null的时候也被认为正确的 CaseMode ...
- pugixml使用教程
pugixml介绍 pugixml是一个高性能.轻量级并且简单易用的xml解析库,支持UTF8 encoding.Little-endian UTF16.Big-endian UTF16.UTF16 ...
- Linux 查看文件内容的命令
转载自:新浪博客 (观看档案内容 : cat, tac, more, less, head, tail, nl, 刚刚我们提到的都只是在于显示档案的外观,或者是移动与复制一个档案或目录而已,那么如果我 ...
- Java JNDI Datasource HOW-TO Problem
在开发JAVA的时候发生了点问题,解决方案记录一下,在这里http://tomcat.apache.org/tomcat-7.0-doc/jndi-datasource-examples-howto. ...
- 21 Merge Two Sorted Lists(两链表归并排序Easy)
题目意思:对两个递增链表进行归并排序 思路:没什么好说的,二路归并 /** * Definition for singly-linked list. * struct ListNode { * int ...
- 如何把powerpoint幻灯片大小改为标准或宽屏教程【图文】
不知道大家还记得早期powerpoint版本,幻灯片的形状是较方(4:3),随着科技的发展,很多电视.视频都在用宽屏,powerpoint自然也是如此,现在默认的幻灯片大小是宽屏 (16:9),怎么把 ...
- iOS开发——OC篇&特殊数据类型
一些特殊的数据类型 id.nil.Nil.SEL ,IMP Objective-C中有一些很有趣的数据类型经常会被错误地理解.他们中的大多数都可以在/usr/include/objc/objc.h或者 ...
- Oracle归档日志定时删除任务
1.在Oracle账号下,创建归档日志删除文件del_arch.sh 文件位置:/home/oracle/crontabOra,内容如下: #!/bin/bash LOG_DIR=/home/orac ...
- java.util.concurrent并发包诸类概览
java.util.concurrent包的类都来自于JSR-166:Concurrent Utilities,官方的描述叫做“The JSR proposes a set of medium-lev ...
- Solr4.8.0源码分析(18)之缓存机制(一)
Solr4.8.0源码分析(18)之缓存机制(一) 前文在介绍commit的时候具体介绍了getSearcher()的实现,并提到了Solr的预热warn.那么本文开始将详细来学习下Solr的缓存机制 ...