原文地址:这里

@charset "UTF-8";

/**
* 自定义变量
*/
$blue: #1875e7;
div {
color: $blue;
} /**
* 变量要嵌在字符串中间
*/
$side: left;
.rounded{
border-#{$side}-radius: 5px;
} /**
* 计算
*/
$unit: .05rem; .box{
height: $unit / 2;
width: 10 * $unit;
} /**
* 标签嵌套
*/
.parent{
background: #fff;
.child{
font-size: 12px;
}
} /**
* 属性嵌套
*/
p{
border: {
color: red;
width: 1px;
}
} /**
* 伪类
*/
a{
&:hover {
color: red;
}
} /**
* 注释
*
* // 单行注释编译后删除
* ** 多行注释编译后保留
*/ /**
* 继承
*/
.class1{
border: 1px solid #ddd;
}
.class2{
@extend .class1;
font-size: 12px;
}
.class3{
@extend .class1;
border-color: red;
} /**
* mixin 复用代码块
* 如果不需要传参数,可以不带括号
*/
@mixin left{
float: left;
margin-left: 10px;
}
.someclass{
@include left;
} /**
* mixin 可以指定参数和缺省值,就像函数了
*/
@mixin left($value: 10px){
float: left;
margin-left: $value;
}
.someclass2{
@include left(20px);
} /**
* 颜色函数
*/
.color1{
color: lighten(#cc3, 10%);
/**
* 浅 10%
* #d6d65c
*/
}
.color2{
color: darken(#cc3, 10%);
/**
* 深 10%
* #a3a329
*/
}
.color3{
color: grayscale(#cc3);
/**
* 将颜色转化为灰度
* #808080
*
* 怎么计算的?
* (cc + 33) / 2 = 80
*/
background: grayscale(#c03);
/**
* 这个算出来是 #666666
* 那就是。。
* (cc + 00) / 2 = 66
*/
border-color: grayscale(#c30);
/**
* 那来看看这个,会有区别吗?
* #666666
*/
background-color: grayscale(#03c);
/**
* #666666
* 好吧。。
*
* 查了文档,等同于 desaturate($color, 100%),将色彩饱和度调至0
* #cc3 -> hsl(60, 60%, 50%);
* #c03 -> hsl(345, 100%, 40%);
* #c30 -> hsl(15, 100%, 40%);
* #03c -> hsl(225, 100%, 40%);
*
* H(色上) S(饱和度) L(明度)
* S 为 0 时,RGB 都为 L
* 256 * 50% = 128 -> 80
* 256 * 40% = 102 -> 66
*/
}
.color4{
color: complement(#cc3);
/**
* 反象
* #33c
*/
} /**
* 插入文件
* 注:会插到本文件头部
*/
@import "reset.css"; /**
* 再试一下,如果出现两个相同的选择器,会合并到一起吗?
* 不会合并,定义几处,翻译后还是几处
*/
div{
background: #fff;
}
.color4{
background: #fff;
} /**
* 高级用法
*/ /**
* 条件语句
*/
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
p {
@if 1 + 1 == 2 {
background-color: #000;
} @else {
background-color: #fff;
}
} /**
* 循环语句
*/
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
} $i: 6;
@while $i > 0{
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
} @each $member in a, b, c, d{
.#{$member}{
background-image: url("/images/#{$member}.jpg");
}
} /**
* 自定义函数
*/
@function double($n){
@return $n * 2;
}
#sidebar {
width: double(5px);
} $unit: .05rem;
@function unit($value){
@return $unit * $value;
}
#sidebar {
width: unit(720);
} /**
* 修改单位,只影响后面的 css
*/
$unit: 1px;
#sidebar {
width: unit(720);
}

  

SASS常用语法的更多相关文章

  1. Markdown通用的常用语法说明

    前言 Markdown 是一种轻量级的 标记语言,语法简洁明了.学习容易,还具有其他很多优点,目前被越来越多的人用来写作使用. Markdown具有一系列衍生版本,用于扩展Markdown的功能(如表 ...

  2. Markdown简介以及常用语法

    Markdown简介以及常用语法 最近发现用markdown记录东西很方便,感觉和emacs的org mode很类似,但是windows下使用emacs不是很方便.特此记录一下markdown常用的语 ...

  3. Sql常用语法以及名词解释

    Sql常用语法以及名词解释 SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) D ...

  4. Markdown常用语法

    什么是Markdown Markdown 是一种方便记忆.书写的纯文本标记语言,用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档. 通过Markdown简单的语法,就可以使普通文本内容具有 ...

  5. 2 hive的使用 + hive的常用语法

    本博文的主要内容有: .hive的常用语法 .内部表 .外部表 .内部表,被drop掉,会发生什么? .外部表,被drop掉,会发生什么? .内部表和外部表的,保存的路径在哪? .用于创建一些临时表存 ...

  6. sql 常用语法汇总

    Sql常用语法 SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控 ...

  7. ES6常用语法

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  8. python MVC、MTV 框架介绍 Django 模板系统常用语法

    Django 框架简介一.MVC框架和MTV框架1.MVC 全名Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分.优势: 耦合性低 重用性高 生命 ...

  9. PHP中Smarty引擎的常用语法

    PHP中Smarty引擎的常用语法 输出今天的日期: {$smarty.now|date_format:"%H:%M %A, %B %e, %Y"} 实际上用到了PHP的time( ...

随机推荐

  1. [漏洞案例]thinkcmf 2.x从sql注入到getshell实战

    0X00 前言 这个案例是某项目的漏洞,涉及敏感的地方将会打码. 很久没更新博客了,放一篇上来除除草,新的一年会有所转变,以后会有更多领域的研究. 下面是正文 0X01 正文 某厂商某个网站用的是th ...

  2. “==”和equals方法究竟有什么区别?

    ==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同,要比较两个基本类型的数据或两个引用变量是否相等,只能用==操作符. 如果一个变量指向的数据是对象类型的 ...

  3. MongoDB学习路线

    转载博客: 1.MongoDB学习笔记(一)MongoDB概述和安装 http://www.cnblogs.com/wupeiqi/archive/2013/05/12/3074478.html 2. ...

  4. UVA - 1625 Color Length[序列DP 提前计算代价]

    UVA - 1625 Color Length   白书 很明显f[i][j]表示第一个取到i第二个取到j的代价 问题在于代价的计算,并不知道每种颜色的开始和结束   和模拟赛那道环形DP很想,计算这 ...

  5. POJ.3710.Christmas Game(博弈论 树上删边游戏 Multi-SG)

    题目链接 \(Description\) 给定n棵"树",每棵"树"的节点可能"挂着"一个环,保证没有环相交,且与树只有一个公共点. 两人轮 ...

  6. COGS.264.数列操作(分块 单点加 区间求和)

    题目链接 #include<cmath> #include<cstdio> #include<cctype> #include<algorithm> u ...

  7. 洛谷.1110.[ZJOI2007]报表统计(Splay Heap)

    题目链接 附纯SplayTLE代码及主要思路: /* 可以看做序列有n段,Insert是每次在每一段最后插入一个元素 只有插入,没有删除,所以插入一个元素对于询问1影响的只有该元素与前边一个元素(同段 ...

  8. python3基础之文件对象操作

    1.向文本文件中写入内容 s = 'Hello world\n文本文件的读取方法\n文本文件的写入方法\n' # 需要写入文件的字符串 print('显示需要写入的内容:\n{0:s}'.format ...

  9. Oracle层次查询和分析函数在号段选取中的应用

    转自:http://www.itpub.net/thread-719692-1-1.html 摘要一组连续的数,去掉中间一些数,如何求出剩下的数的区间(即号段)?知道号段的起止,如何求出该号段内所有的 ...

  10. spring如何解决单例循环依赖问题?

    更多文章点击--spring源码分析系列 1.spring循环依赖场景2.循环依赖解决方式: 三级缓存 1.spring循环引用场景 循环依赖的产生可能有很多种情况,例如: A的构造方法中依赖了B的实 ...