我们一起学SASS
写在前面
sass大约是4年前(2011年)的新技术,sass官网有详细介绍,包括安装指南、学习教程、语法细节文档等等,很全面也很清晰
为什么有必要学sass?因为很多前端自动化工具都用sass,比如京东的JDF、淘宝的KISSY都支持sass,在实际产品的开发中,sass用得很多,而且sass语法很简单,学习成本不高
至于sass与less,其实差异不是很大,功能相似,只是在语法细节上有差别。而且就功能而言,sass要略强于less,所以看看sass肯定是不亏的
一.sass是什么?
据官方说法,sass(Syntactically Awesome Style Sheets)是一种css扩展语言
我们知道的css只是一种标记语言,缺乏可编程特性,比如不支持变量、函数、逻辑流控制等等,缺乏这些特性使得css代码不易维护和修改,而sass就是要给css扩展这些可编程特性
类似的东西还有less和stylus,三者的区别请查看开源中国社区:为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
二.sass与scss的区别
scss(Sassy CSS)是新版sass,其实区别不大,主要在语法格式上有差异:sass不需要花括号和分号,用缩进表示嵌套关系,仅此而已
P.S.一般都用scss格式的,可能是因为更容易从css格式过渡过来
三.sass具体语法
P.S.此处给出完整测试代码,细节都在注释里,建议打开sass在线编辑,把下面的代码粘过去,与生成的css代码对比理解
// 1.这个注释编译后就没了
/* 2.这个注释编译后还在,但压缩后就没了 */
/*!
* 3.这个注释压缩后都在,用来说明重要信息,比如版权声明
*/ /* 引用a.scss文件,合并编译结果 */
//@import "path/a"; // 因为没有a.scss,所以会报错
/* 引用普通css文件,编译为@import url(...) */
@import "path/a.css"; /*
* 可以用嵌套结构表示后代
* 可以用@at-root跳出所有嵌套,感觉没什么用,只会把代码变得更混乱
*/
div {
h2 {
color: white;
// 属性也可以嵌套,但要注意属性名后面的冒号
border: {
color: red;
width: 1px;
};
}
}
/* 可以用&引用外层元素 */
a {
span {
&:hover {
color: red;
}
span {
// 无法引用外外层元素
// 直接用&&会报错,若用空格隔开则生成a span span a span span
// 没什么意义
& &:hover{
color : red;
}
}
}
} /* 变量的声明及使用 */
$myFontSize : 14px;
$attr : color;
$arr : 3 2 1; // 一维数组
$arr2 : 10 20,
30 40; // 二维数组
$map : (myWidth : 30px, myHeight : 50px); // 映射
// 使用变量
h1 {
font-size : $myFontSize; // 属性值替换
border-#{$attr} : red; // 属性名替换
border-width : nth($arr, 3); // 取第3个元素
width : nth(nth($arr2, 2), 1); // 取arr[1][0]
height : map-get($map, myHeight);
} /* 变量作用域 */
$myValue : 1;
$gValue : 1;
// 测试变量作用域
.test {
$myValue : 2;
$gValue : 2 !global; // 全局变量
width : $myValue;
height : $gValue;
}
.test2 {
width : $myValue;
height : $gValue;
} /* 混合的声明及使用 */
@mixin m_noArgs {
width : 100px;
height : 100px;
}
@mixin m_hasArgs($w, $h) {
width : $w;
height : $h;
}
@mixin m_hasDefaultArgs($w, $h : 100px) {
width : $w;
height : $h;
}
@mixin m_hasManyArgs($m, $p, $w : 100px, $h : 100px) {
margin : $m;
padding : $p;
width : $w;
height : $h;
}
@mixin m_hasGroupArgs($ts...) { // 参数个数不确定,比如渐变,阴影
text-shadow : $ts;
}
// 使用
h1 {
/* 传入参数多了少了都报错 */
@include m_noArgs;
@include m_hasArgs(100px, 200px);
@include m_hasDefaultArgs(50px);
@include m_hasDefaultArgs(50px, 50px);
@include m_hasManyArgs($p : 3px, $m : 5px); // 带名传参,不用管顺序
@include m_hasGroupArgs(0 1px 0 #777, 0 -1px 0 #000);
} /* 继承 */
// 父类
.super {
color : red;
}
// 子类
.sub {
// 继承父类属性
@extend .super;
// 子类属性
background-color : white;
}
/* 占位符选择器%,不调用就不编译生成css,避免继承产生多余的css */
%header { // 不会生成css
color : red;
}
%footer {
color : red;
}
// 调用
.myFooter {
@extend %footer;
} /* 函数 */
/* 调用库函数 */
$myColor1 : darken(#00f, 20%); // 加深20%
$myColor2 : lighten(#00f, 20%); // 减淡20%
p {
color : $myColor1;
background : $myColor2;
}
/* 自定义函数 */
@function add($arg1, $arg2) {
@return $arg1 + $arg2; // 注意return前面要有@
}
h1 {
font-size : add(10px, 20px);
} /* 运算 */
// 支持+、-、*、/、()
.test {
//width : 12px + 1em; //报错,单位不匹配
color : #000 - #fff;
color : #ccc + #eee;
} /* 条件语句 */
$color : true;
h1 {
@if ($color == true){ //没有===操作符,和js不一样
color : red;
}
@else if ($color){ //if前不加@,加了报错
//...
}
@else {
//...
}
}
// 还有三目判断if($condition, $if_true, $if_false)但意义不大 /* for循环 */
@for $i from 1 to 3 { // 注意:to表示[1, 3),through表示[1, 3]
.item-#{$i} {
width: 20px * $i;
}
}
/* each循环 */
$arr : top, right, bottom, left;
$arr2 : 10 20,
20 30;
$map : (h1 : 3em, h2 : 2em, h3 : 1em);
div {
@each $item in $arr { // 遍历一维数组
border-#{$item} : 1px solid red;
}
}
p {
@each $tb, $lr in $arr2 { // 遍历二维数组
outline : $tb, $lr;
border : $tb, $lr;
}
}
@each $h, $em in $map { // 遍历map
#{$h} {
font-size : $em;
}
}
// 参考资料:http://www.w3cplus.com/sassguide/syntax.html
如下图:
如果不喜欢这种看代码说话的方式,可以查看W3CPlus:sass语法,提供了图文并茂的讲解
P.S.个人更喜欢看代码说话,因为代码简单明了,没废话,如果代码示例恰到好处的话就更好了
四.在线资源
sass官网:最标准,最权威
W3CPlus:有一篇很详尽的入门文章,图文并茂(上面也提到了)
sass在线编辑器:不想装ruby,还要用sass,用它就对了
RubyInstaller:Windows下装不了ruby?这里有好用的exe
参考资料
我们一起学SASS的更多相关文章
- SASS的安装及使用(前提:安装Ruby)
本文仅适用于Windows系统. 一.安装Ruby Sass是用Ruby语言写的,但是两者的语法没有关系,所以学 Sass 不用学 Ruby,只是必须先安装Ruby,然后再安装Sass. Linux和 ...
- 关于sass的介绍和基本语法
引入 什么是sass?sass是css预处理器. 那预处理器又是什么?css本身不是一种编程语言,而预处理器是用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件. 如今主流的预处理器 ...
- 用sass画蜗牛
一.sass的好处 用css画图也算是简单的实战吧,虽然用到的东西还比较少..用过之后,发现sass主要有以下优势: 可维护性.最重要的一点,可维护性的很大一部分来自变量 嗯,最简单的例子,画图总要有 ...
- sass的学习笔记
sass初学入门笔记(一) 我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS ...
- sass初学入门笔记(一)
我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS 预处理器技术已经非常的成熟, ...
- jq插件处女座 图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...
- sass学习笔记(一)接上个 持续学习中..(还发现个讲解的bug) sass至少我现在学的版本支持局部变量了
6.全局变量 sass暂时没有局部变量 局部定义变量会覆盖全局变量 新出!global 不过要sass 3.4版本以后 (这句呢,,我觉得是错的 开始写的时候没测试 现在发现我觉得他是有 ...
- CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- sass
本文来自阮一峰http://www.ruanyifeng.com/blog/2012/06/sass.html 学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也 ...
随机推荐
- struts2 xml中重定向
<result name="success" type="redirect">ManagePartAction</result> 重定向 ...
- List集合转换为数组形式
通过List集合对象的转类型函数 .ToArray() 如List<decimal> → deciaml[] 代码如下: var ComIdList = ComList.Select(p ...
- System.DateTime.Now的内容
?System.DateTime.Now{2016/10/09 15:19:12} Date: {2016/10/09 0:00:00} dateData: 985948826838121 ...
- 处理返回结果(XML)
var xmlHttp function showUser(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Br ...
- oVirt-engine项目UI结构
1.管理面板文件路径 ovirt-engine/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmi ...
- 界面设计常用CSS属性
CSS常用属性整理: 1 字体属性 font-family 设置使用的字体 font-style 设置字体的样式,是否斜体 font-variant 设置字体的大小写 font-weight 设置字体 ...
- 【项目】搜索广告CTR预估(一)
本文介绍CTR相关基础知识. 一.广告投放系统 广告系统包含多个子系统.除了上图所示的广告投放系统外,还包含商业系统(广告库的获得),统计系统(点击展示日志的获得)等. 广告投放系统主要是面向用户的, ...
- P2001xor-sigma 字典树,然而好坑
https://vijos.org/p/2001 设perXor[i]表示1---i的前缀异或值. 那么要得到某一段的异或值,只需要perXor[j] ^ perXor[i - 1] 那么我们把per ...
- 运用CSS和JS写的大图轮播-带箭头
<style type="text/css"> #datu { width:500px; height:400px; position:relative; margin ...
- LeetCode OJ 150. Evaluate Reverse Polish Notation
Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...