Sass基础语法
Sass是CSS3语言的扩展,在CSS的基础之上添加了新特性和语法,能省事地写出更好的样式表。Sass引擎是基于Ruby的。
导入Sass文件:
@import "colors" //colors.scss
注释:
//这种注释不会出现在生成的css文件中
/*这种注释内容会出现在css文件中,当当出现在原生CSS不允许的未知,则这些注释会被抹掉*/
变量>>
-->变量声明
//注意:变量中下划线和中划线表示同一个变量
$flower-color:#abcdef; //flower-color是一个变量,其值现在是#abcdef
$basic-border:1px solid black; //任何可以用作CSS属性值的赋值都可以作为SASS的变量值
$basic-font:"MyriadPro"、Myriad、"helveticaNuue"、Helvetica;//也可以是逗号分割的多个属性值
//与CSS属性不同,变量可以在CSS会泽块定义之外使用。当变量定义在CSS规则块内,那么该变量只能在其子级规则块内使用。
$nav-color:#dadada;
nav{
$width:100px;
width:$width;
color:$nav-color;
}
-->变量引用
凡是CSS属性的标准值可以存在的地方,变量就可以实用。
$flower-color:red; //变量声明
.flower{ //变量引用
border:1px $flower-color solid;
}
嵌套规则>>
-->基本嵌套规则,和一些编程语言很类似很容易理解,群则选择器的嵌套也和CSS语法一样
//CSS 代码,经常重复写选择器
#content article h1{color:#333}
#contetn article p{margin-bottom:1.5em;}
#cojntent aside{background-color:#eee;} //SASS代码,选择器嵌套
#content{
article{
h1{color:#333}
p{margin-bottom:1.5em}
}
aside{background-color:#eee;}
}
-->父选择器的标识符&
article a{
color:blue;
&:hover{color:red} //必须标识父选择器&,否则SASS无法正常工作
} //CSS 代码
article a{color:blue}
article a:hover{color:red}
-->子组合选择器和同层组合选择器:> + ~
这些选择器必须配合其他选择器实用,以制定浏览器仅选择某种特定上下文中的元素。这些选择器可以应用带Sass的规则嵌套中。
article section{margin:5px;}
//用子组合选择器>选择一个元素的直接子元素
article>section{border:1px red solid}
//同层相邻组合选择器+选择元素紧跟着的元素
header + p {font-size:1.1em}
//同层全体组合选择齐齐~,选择跟在元素后的同层元素,不管他们之间间隔了多少其他元素
article ~ article {border:1px solid red;}
-->嵌套属性
除了选择器,属性也可以进行嵌套。
nav{
border:1px solid #ccc{
left:0px;
right:0px;
}
}
虽然属性和选择器嵌套可以大大减少便血量,但当样式表越来越大,这种写法很难保持结构清晰。而处理大量样式的唯一方法就是分拆成多个文件。
混合器>>
@mixin corners{ //用@mixin标识符定义
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;;
-o-border-radius:5px;
border-radius:5px;
} .calamus{
border:2px solid red;
@include corners; //用@include调用混合器中的所有样式
} //混合器中不仅可以包含css规则还可以包含属性,也可以嵌套 //混合器可以传递参数
@maxin link-colors($normal,$hover){
color:$normal;
&:hover{color:$hover}
} a{
@include link-colors(blue,red); //参数的传递
}
继承>>
通过 @extend实现
.error{
border:1px solid red;
color:red;
}
.seriousError{
@extend .error; //继承error的属性值
width:300px;
}
Sass基础语法的更多相关文章
- sass笔记-2|Sass基础语法之让样式表更具条理性和可读性
这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后 ...
- sass笔记-3|Sass基础语法之样式复用和保持简洁
上一篇详述了Sass如何嵌套.导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定 ...
- Sass的使用和基础语法
sass安装 官网下载ruby的windows安装包,安装时勾选上添加到环境变量add ruby executables to your path.安装完成后打开命令行,ruby -v输出内容则安装完 ...
- sass基础编写流程
这是之前整理在word上的基础流程 sass是Ruby语言开发的一个用于动态编程css文件的框架 所以sass的运行依赖Ruby环境 所以要先安装Ruby 参见详细教程(安装参照慕课网有详细的教程) ...
- 前端利器:SASS基础与Compass入门
SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...
- [转]前端利器:SASS基础与Compass入门
[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...
- sass基础—具体编译步骤及对应命令:详细
/*基础语法*/h1{ color: red;} /*变量定义*/ $color: red; /*嵌套*/body{ header{ } footer{ }} /*mixin函数*/@mixin al ...
- Sass 基础教程
0. Sass 文件后缀名 sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号:另一种就是我们这里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分 ...
- sass高级语法的补充
1. 继承 2.混入 3.函数 我这篇博客需要点基础才能看懂, 但我这篇博客是对上一篇的 sass高级语法 的补充 从这方面来看也无所谓了
随机推荐
- 黄聪:VS2010开发T4模版引擎之基础入门
原文:http://www.cnblogs.com/lzrabbit/archive/2012/07/15/2591085.html 额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又 ...
- C#继承的用法
using System; namespace 继承 { public class cat { private string _name = null; private int _age = 0; p ...
- PLSQL_基础系列02_分组函数GROUP BY / ROLLUP / CUBE(案例)
2014-11-30 Created By BaoXinjian
- Laravel 5 IDE Helper 安装
一.项目地址 https://github.com/barryvdh/laravel-ide-helper 二.安装方法 1.方法一:直接使用已经生成的文件 下载 https://gist.githu ...
- java位运算
Java的位运算(bitwise operators)直接对整数类型的位进行操作,这些整数类型包括long.int.short.char和 byte,位运算符具体如下表: 运算符 说明 << ...
- 专注于提高“人肉测试”效率,Bugtags已完成600万元天使轮融资
导语:近日,专注于移动测试的缺陷发现及管理工具“Bugtags”创始人张磊独家透露,Bugtags已完成600万元天使轮投资,投资方为高捷资本. 近日,专注于移动测试的缺陷发现及管理工具“Bugtag ...
- vim操作笔记
1.切换到下一个文件 假设要切换的文件名为 test.py :ex test.py 2.文档内复制命令 yy "复制光标所在行.或大写一个Y. 2yy "复制两行. y^ &quo ...
- Thinkpad X240在Centos 7下使用ID 138a:0017或者vfs5011指纹识别
我的笔记本是ThinknPad X240,自带的指纹识别器,通过命令lsusb可以查看: [zz@zz ~]$ lsusb Bus 001 Device 002: ID 24ae:2003 Bus 0 ...
- dedecms v5.7 sp1 给栏目添加缩略图功能
一.给数据库添加字段typeimg 如图: 二 . 修改 dede/catalog_add.php 找到 $in_query = "INSERT INTO `#@__arctype`(r ...
- 20145305 《Java程序设计》第8周学习总结
教材学习内容总结 1.NIO使用频道来衔接数据节点,可以设定缓冲区容量,在缓冲区中对感兴趣的数据区块进行标记,提供clear().rewind().flip().compact()等高级操作 2.想要 ...