前端学习之路——scss篇
一、什么是SASS
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
二、安装和使用
Sass依赖于ruby环境,所以装sass之前先确认装了ruby。先导官网下载个ruby。在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境。安装好ruby后,然后安装Sass。(mac自带)
输入一下命令:
gem install sass
这样,sass就可以使用了。
三、基本使用
Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本;二种比较老的语法成为缩排语法(或者就称为 "Sass"), 提供了一种更简洁的 CSS 书写方式。使用 sass-convert 命令实现两者相互转换。本文介绍的是Scss用法。
# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss # 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass
3.1 注释
SASS共有两种注释风格。标准的CSS注释 /* comment */ ,会保留到编译后的文件。单行注释 // comment,只保留在SASS源文件中,编译后被省略。在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
3.2 变量
SASS可以使用变量,所有变量以$开头。如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。变量后面添加 !default ,表示该值是默认值。
$left: left; div{
float: $left;
margin-#{$left}: 20px;
}
多个变量
多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。
/* list */
$linkColor: #08c # !default;//第一个值为默认值,第二个鼠标滑过值
a{
color:nth($linkColor,); &:hover{
color:nth($linkColor,);
}
} /* map */
$headings: (h1: 2em, h2: .5em, h3: .2em);
@each $key, $value in $headings {
#{$key} {
font-size: $value;
}
} 编译为:
/* list */
a { color: #08c; }
a:hover { color: #; } /* map */
h1 { font-size: 2em; }
h2 { font-size: .5em; }
h3 { font-size: .2em; }
3.3 嵌套
SASS可以使用选择器嵌套。
div {
img{
width: 50px;
}
} //编译为
div img{ width: 50px; }
属性也可以嵌套,比如 border-color 属性。
div{
border: {
color: red;
}
} //编译为
div{ border-color: red; }
注意:border后面必须加上冒号。
在嵌套的代码块内,可以使用 & 引用父元素。比如 a:hover 伪类。
a{
&:hover{
color: #ccc;
}
} //编译为
a:hover{ color: #ccc;}
3.4 @at-root
sass3.3.0中新增的功能,用来跳出选择器嵌套的。默认所有的嵌套,继承所有上级选择器,但有了这个就可以跳出所有上级选择器。适用 BEM 命名方式(如: .block 、.block__element 、.block--modifier)、@keyframe。先看如果使用嵌套写法是什么样的情况。
.block {
color: red;
#{&}_element {
color:blue;
}
#{&}--modifier {
color: orange;
}
} 编译为
.block { color: red; }
.block .block_element { color: blue; }
.block .block--modifier { color: orange; }
明显编译出来的CSS并不是我们想要的代码。 @at-root
可以实现上面 BEM 的特性。
.block {
color: red;
@at-root #{&}_element {
color:blue;
}
@at-root #{&}--modifier {
color: orange;
}
} 编译为:
.block { color: red; }
.block_element { color: blue; }
.block--modifier { color: orange; }
3.5 计算
SASS允许在代码中使用算式。这里就不做描述了。
四、代码重用
4.1 继承
SASS通过 @extend 命令使一个选择器class2继承另一个选择器class1
.class1{
width: 50px / ;
height: 50px + 50px;
}
.class2{
@extend .class1;
height: 50px;
} 编译为:
.class1, .class2 { width: 50px / ; height: 100px; }
.class2 { height: 50px; }
编译后以群组选择器方式显示;如果选择器class2不需要选择器class1的某个属性,可添加该属性进行覆盖,并单独显示出来。(看文档的时候总是将群组选择的 “,” 看成 “.”,误认为后代选择器了,所以写出来。)
4.2 Mixin
Sass中使用 @mixin
声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值 $opacity:50 ,如果一个参数可以有多组值,如 box-shadow、transition 等,那么参数则需要在变量后加三个点表示,如 $variables...
。使用 @mixin 命令,定义一个代码块。再使用 @include 命令,调用这个 @mixin。
@mixin opacity($opacity:) {
opacity: $opacity / ;
filter: alpha(opacity=$opacity);
}
.opacity{
@include opacity;
}
.opacity-{
@include opacity();
} 编译为:
.opacity { opacity: 0.5; filter: alpha(opacity=); }
.opacity- { opacity: 0.8; filter: alpha(opacity=); }
4.3 函数
Sass定义了很多函数可供使用,当然你也可以自定义函数,以 @fuction 开始。实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)
和darken($color,$amount)
,它们的第一个参数都是颜色值,第二个参数都是百分比。
$color: red;
@function rem($rem){
@return $rem / + rem;
}
.box{
foot-size: rem();
color: lighten($color, %);
} 编译为:
.box { foot-size: 2rem; color: #ff6666; }
五、高级使用
5.1 条件语句
@if可以用来判断:
p {
@if + == { border: 1px solid; }
@if < { border: 2px dotted; }
@if null { border: 3px double; }
} 编译为:
p { border: 1px solid; }
@if 声明可以由几个 @
else if
语句,一个 @else
声明组成。
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
} 编译为:
p { color: green; }
5.2 循环语句
@for循环:from x to y: 不含y;from x through y:包含y。
@for $i from to {
.border-#{$i} {
border: #{$i}px solid blue;
}
} @for $i from through {
.item-#{$i} { width: 2em * $i; }
} 编译为:
.border- { border: 1px solid blue; }
.border- { border: 2px solid blue; }
.item- { width: 2em; }
.item- { width: 4em; }
.item- { width: 6em; }
@each
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
} 编译为:
.puma-icon { background-image: url("/images/puma.png"); }
.sea-slug-icon { background-image: url("/images/sea-slug.png"); }
.egret-icon { background-image: url("/images/egret.png"); }
.salamander-icon { background-image: url("/images/salamander.png"); }
@while
$i: ;
@while $i > {
.item-#{$i} { width: 2em * $i; }
$i: $i - ;
} 编译为:
.item- { width: 12em; }
.item- { width: 8em; }
.item- { width: 4em; }
六、编译
在命令行中运行 Sass 进行编译,只要输入:
sass input.scss output.css
命令 Sass 监视文件的改动并更新 CSS :
sass --watch input.scss:output.css
如果你的目录里有很多 Sass 文件,你还可以命令 Sass 监视整个目录:
sass --watch app/sass:public/stylesheets
在命令行后面添加 --style 编译格式 可以选择编译方式。
编译方式有四种:
nested(默认):选择器与属性等单独占用一行,缩进量与 Sass 文件中一致,每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时,这种样式可以很容易地分析文件的主要结构;
expanded:选择器、属性等各占用一行,属性根据选择器缩进,而选择器不做任何缩进;
compact:每条 CSS 规则只占一行,包含其下的所有属性。嵌套过的选择器在输出时没有空行,不嵌套的选择器会输出空白行作为分隔符;
compressed:删除所有无意义的空格、空白行、以及注释,力求将文件体积压缩到最小,同时也会做出其他调整,比如会自动替换占用空间最小的颜色表达方式。
编译错误,命令行中会报错,并提示错误代码行数。
学习资料:
sass语法 http://www.w3cplus.com/sassguide/syntax.html
Sass http://sass.bootcss.com/docs/sass-reference/
http://www.ruanyifeng.com/blog/2012/06/sass.html
前端学习之路——scss篇的更多相关文章
- 前端学习之路——Git篇
本文只是一个个人学习Git的笔记,如有错误的地方,还望指出,谢谢!参考资料如下: <Git教程--廖雪峰的官方网站 > bootstrap里面的--git_guide Git安装 在网上搜 ...
- 前端学习之路——gulp篇
一.构建gulp环境 1.下载nodejs gulp基于node.js,要通过nodejs的npm安装gulp,所以要先安装node.js环境.(英文官网/中文官网链接). 通过cmd命令窗口确定安装 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 前端学习之路-CSS介绍,Html介绍,JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- STM32学习之路入门篇之指令集及cortex——m3的存储系统
STM32学习之路入门篇之指令集及cortex——m3的存储系统 一.汇编语言基础 一).汇编语言:基本语法 1.汇编指令最典型的书写模式: 标号 操作码 操作数1, 操作数2,... ...
- 我的web前端自学之路-心得篇:我为什么要学习web前端?
时光如流水,转眼间,自己已经是大三的学长了,看着一个个学弟学妹,心中有种莫名的感觉,很怀念大学的前两年时光,但也很憧憬着自己的未来,自己将要去经历很多从未经历的事.我是我们学校信科院的一名学生,在编程 ...
- Vue学习之路第一篇(学习准备)
1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimete ...
- Day1前端学习之路——概述
终于下定决心要好好学习前端知识了,以后会把学习过程中的一些随笔记录在这里.HTML.CSS.JavaScript这三大前端语言在大三的时候就有所接触,但是学习的不够深入,这一次希望能够坚持下去. 学习 ...
- web前端学习之路
test 随着自己对于web前端知识了解的越多,越来越发现自己真的好菜 一脸茫然阶段 两年前大学接触网页设计,那时对于网页设计一窍不通,只是看了一本自己大学编的一本入门教材,我甚至不知道那些网页设计的 ...
随机推荐
- [ RESTful ] [ API ] 有用的資訊
1. 淺談 REST 軟體架構風格 (Part.I) - 從了解 REST 到設計 RESTful https://blog.toright.com/posts/725/representationa ...
- 自定义一个简单的web框架
from wsgiref.simple_server import make_server def book(request): #视图函数 return [b'<h1> book ...
- Eclipse本地创建新的GIT分支,并推送至远程Git分支
本地创建新的GIT分支: 1.右击要创建新分支的项目——Team——Switch To——New Branch…: 2.在弹出的对话框中name框中输入要创建的分支名称,(如果是当前显示的要拷贝的分支 ...
- BZOJ2440: [中山市选2011]完全平方数 容斥原理_莫比乌斯函数
emmm....... 数学题都不友好QAQ...... Code: #include <cstdio> #include <algorithm> #include <c ...
- SparkSql初级编程实践
1.Spark SQL 基本操作将下列 JSON 格式数据复制到 Linux 系统中,并保存命名为 employee.json.{ "id":1 , "name" ...
- ARM - Linux嵌入式C/C++各种资料分享【更新日期:2012/04/24】
http://blog.csdn.net/shuxiao9058/article/details/6786868 由于115网盘取消大众分享功能,因此不能继续分享下载链接.更新资料将在本人分享空间转存 ...
- Mybatis 中 foreach collection 的三种用法
foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach元素的属性主要有 item,index,collection,open,separator,close. ...
- MyBatis学习总结(7)——Mybatis缓存
一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 一级缓存: 基于PerpetualCache 的 HashMap本地缓存,其存储作用域为 Se ...
- ubuntu设置PATH
试了好多遍,多无效.. 最后在/etc/enviroment下设置才有效. 不过让有一些未解问题 我使用sudo su 进入到root用户权限,设置完成的. 重新使用sudo -s进入root用户权限 ...
- POJ3684 Physics Experiment 【物理】
Physics Experiment Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1031 Accepted: 365 ...