sass 常用用法笔记
最近公司开发的h5项目,需要用到sass,所以领导推荐让我去阮一峰大神的SASS用法指南博客学习,为方便以后自己使用,所以在此记录。
一、代码的重用
1、继承:SASS允许一个选择器,继承另一个选择器。
class2要继承class1,就要使用@extend命令:
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
2、Mixin:Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。使用@include命令,调用这个mixin。
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
mixin的强大之处,在于可以指定参数和缺省值。使用的时候,根据需要加入参数:
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
3、颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4、插入文件
@import命令,用来插入外部文件
@import "path/filename.scss";
二、高级用法
1、条件语句:
@if可以用来判断
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令:
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
2、循环语句
for循环:
@for $i from to {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
while循环:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
3、自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
sass 常用用法笔记的更多相关文章
- Linux常用命令 笔记
Linux常用命令 笔记 一.文件处理命令 1. ls命令:显示目录文件 -a 显示所有文件,包括隐藏文件.(all) ...
- STL之vector常用函数笔记
STL之vector常用函数笔记 学会一些常用的vector就足够去刷acm的题了 ps:for(auto x:b) cout<<x<<" ";是基于范围的 ...
- centos的vi常用用法
centos的vi常用用法 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的 ...
- MySql与SqlServer的一些常用用法的差别
MySql与SqlServer的一些常用用法的差别 本文为转载 本文将主要列出MySql与SqlServer不同的地方,且以常用的存储过程的相关内容为主. 1. 标识符限定符 SqlServer [] ...
- Linux 常用命令笔记
Linux 常用命令笔记 1. locate locate:用来定位文件的位置,如:locate a.txt 但是这个命令有延迟,也就是新建的文件不一定能搜索到,如果非要找到新建的文件可以使用 upd ...
- [转]ssh常用用法小结
ssh常用用法小结 1.连接到远程主机: 命令格式 : ssh name@remoteserver 或者 ssh remoteserver -l name 说明:以上两种方式都可以远程登录到远程主机, ...
- jquery中关于append()的用法笔记---append()节点移动与复制之说
jquery中关于append()的用法笔记---append()节点移动与复制之说 今天看一本关于jquery的基础教程,看到其中一段代码关于append()的一行,总是百思不得其解.于是查了查官方 ...
- 【三支火把】---一份程序看懂C程序printf()的几种常用用法
闲来继续巩固我的学习之路,今天略微整理了一下,C程序中Printf()的一些常用用法,虽然自己以前好像会,但是不够系统,今天大致整理了一些,先贴上来看看,以后在看到其他,继续补充,希望能帮到一些像我一 ...
- grep参数说明及常用用法
grep参数说明及常用用法 趁着午休的时间把自己经常使用的一些grep命令整理一下. 方便以后查看. 后续会逐步把awk/sed/find等常用的命令理一理. 增强下记忆. 也算是对得起自己了. ^^ ...
随机推荐
- uboot配置和编译过程详解【转】
本文转载自:http://blog.csdn.net/czg13548930186/article/details/53434566 uboot主Makefile分析1 1.uboot version ...
- Centos6.8防火墙设置
# 查看防火墙状态 service iptables status # 停止防火墙 service iptables stop # 启动防火墙 service iptables start ...
- Android 查询 添加 修改 删除通讯录联系人示例
1.AndroidManifest.xml中添加权限 <uses-permission android:name="android.permission.READ_CONTACTS&q ...
- Python机器视觉编程常用数据结构与示例
本文总结了使用Python进行机器视觉(图像处理)编程时常用的数据结构,主要包括以下内容: 数据结构 通用序列操作:索引(indexing).分片(slicing).加(adding).乘(multi ...
- Linux 系统开机启动项清理
一般情况下,常规用途的 Linux 发行版在开机启动时拉起各种相关服务进程,包括许多你可能无需使用的服务,例如蓝牙bluetooth.Avahi. 调制解调管理器ModemManager.ppp-dn ...
- iOS copy/retain/assign
1 深复制:内容拷贝,源对象和副本对象指的是两个不同的对象,源对象引用计数器不变,副本对象引用计数器为1 2 浅复制:指针拷贝,源对象和副本对象指的都是同一个对象,对象引用计数器+1,相当于retai ...
- Elasticsearch 安装配置 外网访问 及 后台启动
本文转自http://www.jianshu.com/p/658961f707d8 作者:咪博士 感谢咪博士分享 Elasticsearch的安装总体来说还是相当简单的,当然中间也会有些小坑.不过大家 ...
- html meta标签使用
HTML语言标准注释:meta标签是对网站发展非常重要的标签,它可以用于鉴别作者,设定页面格式,标注内容提要和关键字,以及刷新页面等等. Google在2009年就宣布在搜索算法中不再使用元关键词或者 ...
- 洛谷 - P2045 - 方格取数加强版 - 费用流
原来这种题的解法是费用流. 从一个方格的左上走到右下,最多走k次,每个数最多拿走一次. 每次走动的流量设为1,起始点拆点成限制流量k. 每个点拆成两条路,一条路限制流量1,费用为价值相反数.另一条路无 ...
- POJ2456【二分】
题意: n个位置,m个帅气的窝的化身,然后窝要去这些位置,问一个最小距离的最大. 思路: 就是二分最小距离,然后判断一下该最小距离x 下,是不是存在>=m个窝的化身之间的距离>=x就好了: ...