SASS语法学习
一、嵌套
1.选择器嵌套
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
nav {
a {
color: red; header & {
color:green;
}
}
}
2.属性嵌套
.box {
border: {
width: 12px;
style: bold;
}
}
等于
.box { border-width: 12px; border-style: bold; }
二、混合宏
1.声明混合宏
@mixin border-radius($radius){ //它可以传递多个参数,也可以不传递任何参数
-webkit-border-radius: $radius;
border-radius: $radius;
}
2.调用混合宏
button {
@include border-radius(3px);
}
三、扩展/继承
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
} .btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
} .btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
四、占位符
%pt5{
padding-top: 5px;
}
//这段代码要是没有被 @extend 调用,他并没有产生任何代码块,只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码:
.btn {
@extend %pt5;
}
五:插值
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
} //结果
.login-box {
margin-top: 14px;
padding-top: 14px;
}
//构建一个选择器
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px); //结果
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }
SASS语法学习的更多相关文章
- 为sublime text2 添加SASS语法高亮
以前写CSS时,都是直接写样式,没有任何的第三方工具,后面发现越是面向大网站,越难管理,上次参加完携程UED大会后,发现SASS对于前端团队多人协作和站点代码维护上很有帮助,很多同学都开始用了,我还是 ...
- sass基础学习(一)
移动端布局各种问题 pc端布局各种问题sass 组件模块化面向对象编程ajax 框架学习 webpack 打包 性能优化 gulp是基于Nodejs的自动任务运行器她能自动化地完成 javascrip ...
- 1-3 Sass 语法、编译、调试
Sass 语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 Sa ...
- Golang 语法学习笔记
Golang 语法学习笔记 包.变量和函数. 包 每个 Go 程序都是由包组成的. 程序运行的入口是包 main. 包名与导入路径的最后一个目录一致."math/rand" 包由 ...
- Swift高级语法学习总结(转)
Swift高级语法学习总结 1.函数 1.1 func funcNmae()->(){} 这样就定义了一个函数,它的参数为空,返回值为空,如果有参数和返回值直接写在两个括号里就可以了 1.2 参 ...
- Swift基础语法学习总结(转)
Swift基础语法学习总结 1.基础 1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift使用print和println打印,它的传参是一个泛型 ...
- Sass的学习
第一章:Sass简介 一. 什么是CSS预处理器 定义:CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用 ...
- Swift高级语法学习总结
Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.函数 1.1 func funcNmae()->(){} 这样就定义了一个函数,它的参数为空,返回值为空,如 ...
- Swift基础语法学习总结
Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.基础 1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift ...
随机推荐
- 小兔伴伴家庭动物园AR智能早教产品上市
2016年6月,经过乐卓大家庭所有人的共同努力,公司旗下首款新品——小兔伴伴之<家庭动物园>3D智能学习卡正式面世. 每个孩子都应该在合适的时间去体验丰富的声音.色彩和动作,<家庭动 ...
- 配置svn
Linux搭建SVN Server 其中包括添加防火墙规则
- [iOS]关于视频方向的若干问题
版本: OS X 10.10.5 Xcode 6.4(6E35b) iOS >= 7 一.MOV/MP4视频文件中的Rotation元数据 iOS上内置相机应用录制的mov/mp4视频可能产生 ...
- HTML5[8]: 图文混排,图片与文字居中对齐
<img src="image.png"><span>999</span> img { /* ... */ vertical-align: t ...
- ORM:ODB安装使用过程
1.下载odb-2.4.0-i686-windows,是cpp和sql文件生成工具,已经编译好了,如果下odb-2.4.0估计是未编译好的这个项目: 2.将...\odb-2.4.0-i686 ...
- 有关web 语义的文章总结
A web of data that can be processed directly and indirectly by machines. --Tim Berners-Lee web ...
- 详解MemCached原理
memcached是一个高性能的分布式内存缓存服务器,memcached在Linux上可以通过yum命令安装,这样方便很多,在生产环境下建议用Linux系统,memcached使用libevent这个 ...
- 安装DRBD的一些问题
安装DRBD,建议用源代码包先生成rpm包来安装,不要用直接download的rpm包,有可能会用不了,因为这跟系统内核版本有关系,在2.6.33版本以前内核没有集成drbd, A.先安装一些其它 ...
- 软件测试之黑盒测试:打着手电寻找bug
功能测试,简单的理解就是黑盒测试,就是检测黑盒子,找到里面存在的缺陷. 功能测试新人学习计划: 1. 对于产品的学习---站在客户的角度学习产品.看待问题 测试人员不是简单地按照开发人员的设计文档去撰 ...
- SpringMVC核心——返回值问题
一.SpringMVC 使用 ModelAndView 来处理返回值问题. 1.ModelAndView 官方描述: Holder for both Model and View in the web ...