变量:

$color: #333;
body { color: $color;} -----> body { color: #333; }

嵌套:

nav {
ul { margin: 0; }

------------------------------
nav ul { margin: 0;} 父级选择器:
   a {
&:hover { text-decoration: underline; }

  

引入:

// _reset.scss
html, body, ul, ol {
margin: 0;
padding: 0;
} // base.scss
@import 'reset';

  

混合(Mixin):可复用css声明

@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
}
.box {
@include border-radius(10px);
}
----------------------------------------
.box {
border-radius: 10px;
-ms-border-radius: 10px;

 

继承:可复用代码段

%common {
border: 1px solid #ccc;
padding: 10px;
}
.message {
@extend %common;
}

  

操作符:

+、-、*、/、%

width: 600px / 960px * 100%;

  

命令空间:

.demo {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}

  

-------------------------------------------------------------

参考文章:scss教程

sass片段的更多相关文章

  1. 常用SASS封装

    结合Compass库和工作总结,列出了项目中最为常用的SASS片段.内容收集于网络,我进行了简单整理并测试正常,可以根据实际项目情况进行取舍,值得学习或直接应用,感谢! //重置浏览器默认样式@imp ...

  2. Sass简单使用

    Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...

  3. class命名

    常见class关键词: 布局类:header, footer, container, main, content, aside, page, section 包裹类:wrap, inner 区块类:r ...

  4. Scss - 简单笔记

    原文链接:scss 教程 手头上疯狂在用 scss,虽然可以在里面写原生的 css, 但是为了保持风格的一致性,还是滚去看了看 scss 文档. 一.变量 变量的引入是 scss 的一个核心特性,变量 ...

  5. [HTML] SCSS 备忘录

    Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...

  6. 学习SCSS

    目录 变量 嵌套 引入 混合 继承 操作符 CSS扩展 嵌套属性 标签(空格分隔): 未分类 变量 变量用来存储需要在CSS中复用的信息,例如颜色和字体.SASS通过$符号去声明一个变量. $font ...

  7. SCSS的基本操作

    Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...

  8. SCSS 简要教程(常用指令与方法)

    Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...

  9. 用sass的minix定义一些代码片段,且可传参数

    /** *@module功能 *@description生成全屏方法 *@method fullscreen *@version 1.7.0 *@param{Integer}$z-index 指定层叠 ...

随机推荐

  1. Idea mac

    Idea 的破解 http://idea.lanyus.com/ Idea 的常用配置 模版及模版的使用 创建 JavaWeb 或 Module 关联数据库 版本控制 断点调试 配置 maven 其他 ...

  2. Self-examination

    第一次参加省赛,算是真正感受到比赛的残酷.拿到好成绩,需要平时大量的积累,甚至也需要一点运气,然后我还做的不够,但我觉得我可以做得更好. 我之前是没有任何基础,大一才刚刚从知码开门入门.然后刚开始一直 ...

  3. mysql 优化2 慢查询

    默认情况下mysql不记录慢查询日志,需要在启动的时候指定 bin\mysqld.exe - -slow-query-log 通过慢查询日志定位执行效率较低的SQL语句.慢查询日志记录了所有执行时间超 ...

  4. [LC] 318. Maximum Product of Word Lengths

    Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...

  5. 吴裕雄--天生自然python学习笔记:Python3 输入和输出

    输出格式美化 Python两种输出值的方式: 表达式语句和 print() 函数. 第三种方式是使用文件对象的 write() 方法,标准输出文件可以用 sys.stdout 引用. 如果你希望输出的 ...

  6. IT男频繁猝死背后的心理探秘

    "深圳36岁IT男猝死酒店马桶上"这条新闻再次成为人们眼球的焦点,每每发生这样的事情,难免让人扼腕唏嘘,他们本该是风华正茂的年纪,家有老母贤妻爱子,甚至房子车子票子都不缺,该是一边 ...

  7. AVFoundation Programming Guide(官方文档翻译4)Editing - 编辑

    新博客:完整版 - AVFoundation Programming Guide 分章节版:- 第1章:About AVFoundation - AVFoundation概述- 第2章:Using A ...

  8. c中结构体边界对齐

    原则1.普通数据成员对齐规则:第一个数据成员放在offset为0的地方,以后每个数据成员存储的起始位置要从该成员大小的整数倍开始(比如int在32位机为4字节,则要从4的整数倍地址开始存储). 原则2 ...

  9. 监控Linux系统所选的服务所占进程内存占用

    [代码] #!/bin/bash #程序功能描述: # 监控系统所选的服务所占进程内存占用 #作者:孤舟点点 #版本:1.0 #创建时间:-- :: PATH=/bin:/sbin:/usr/bin: ...

  10. LVS+Keepalived 配置

    LVS+Keepalived配置 环境准备 LVS1:192.168.1.1 LVS2:192.168.1.2 MySQL Server1:192.168.1.13 MySQL Server2:192 ...