sass片段
变量:
$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片段的更多相关文章
- 常用SASS封装
结合Compass库和工作总结,列出了项目中最为常用的SASS片段.内容收集于网络,我进行了简单整理并测试正常,可以根据实际项目情况进行取舍,值得学习或直接应用,感谢! //重置浏览器默认样式@imp ...
- Sass简单使用
Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...
- class命名
常见class关键词: 布局类:header, footer, container, main, content, aside, page, section 包裹类:wrap, inner 区块类:r ...
- Scss - 简单笔记
原文链接:scss 教程 手头上疯狂在用 scss,虽然可以在里面写原生的 css, 但是为了保持风格的一致性,还是滚去看了看 scss 文档. 一.变量 变量的引入是 scss 的一个核心特性,变量 ...
- [HTML] SCSS 备忘录
Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...
- 学习SCSS
目录 变量 嵌套 引入 混合 继承 操作符 CSS扩展 嵌套属性 标签(空格分隔): 未分类 变量 变量用来存储需要在CSS中复用的信息,例如颜色和字体.SASS通过$符号去声明一个变量. $font ...
- SCSS的基本操作
Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...
- SCSS 简要教程(常用指令与方法)
Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...
- 用sass的minix定义一些代码片段,且可传参数
/** *@module功能 *@description生成全屏方法 *@method fullscreen *@version 1.7.0 *@param{Integer}$z-index 指定层叠 ...
随机推荐
- linux配置和查看环境变量
环境变量一般是指在操作系统中用来指定操作系统运行环境的一些参数,比如临时文件夹位置和系统文件夹位置等等. 一.Linux的变量种类 按变量的生存周期来划分,Linux变量可分为两类: 1.永久的:需要 ...
- Template设计模式
template英文名叫模板,在这个模式中,主要的角色有AbstractClass(抽象类)和ConcreteClass(具体类),这里举例如下; 将一段字符或者字符串循环显示5次: 首先定义抽象类, ...
- [LC] 434. Number of Segments in a String
Count the number of segments in a string, where a segment is defined to be a contiguous sequence of ...
- file,path,uri互相转换
uri 转 file :File file = new File(new URI(uri.toString())); uri 转 path: Path path = Files.get(uri); f ...
- 我的第一个Quartz代码
创建Maven项目 打开Eclipse->File->Project->Maven ->Maven Project直接下一步输入Group Id和Artifact Id , ...
- es6 转载
1.let命令 1)let和var的区别:let声明的变量只有所在的代码块有效. 2)没有变量的提升,一定要声明后使用.使用let命令声明变量之前,该变量都是不可用的.形成“暂时性死区”. 3)typ ...
- vue基础指令了解补充及组件介绍
v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...
- struts2和springmvc性能比较2
我们用struts2时采用的传统的配置文件的方式,并没有使用传说中的0配置.spring3 mvc可以认为已经100%零配置了(除了配置spring mvc-servlet.xml外). Spring ...
- 1122 Hamiltonian Cycle (25 分)
1122 Hamiltonian Cycle (25 分) The "Hamilton cycle problem" is to find a simple cycle that ...
- XML的四种解析器(dom_sax_jdom_dom4j)原理及性能比较[收藏]
1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定 ...