您的位置：首页 > 其它

sass学习笔记

2015-09-24 17:42 260 查看

学习访问链接：http://www.w3cplus.com/sassguide/syntax.html

sass在线编辑：http://sassmeister.com/

1,sass有默认的特殊字符，如下

$bgcolor:red !default;
body{
background:$bgcolor;
}
//css style
//-------------------------------
body{
background:red;
}

若需要修改的话，可以在默认的颜色之前添加一个变量，这样就可以覆盖这个颜色样式

$bgcolor:yellow;
$bgcolor:red !default;
body{
background:$bgcolor;
}
//css style
//-------------------------------
body{
background:yellow;
}

2,多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

list类型：

list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值，其中list数据操作还有很多的其他函数如length($list),json(),append()等，具体看参考sass Functions（搜索

List Functions

即可）

定义：

//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

使用：

//sass style
//-------------------------------
$linkColor:         #08c #333 !default;
//第一个值为默认值，第二个鼠标滑过值
a{
color:nth($linkColor,1);

&:hover{
color:nth($linkColor,2);
}
}

//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}

map

map数据以key和value成对出现，其中value又可以是list。格式为：

$map: (key1: value1, key2: value2, key3: value3);

。可通过

map-get($map,$key)

取值。关于map数据还有很多其他函数如

map-merge($map1,$map2)

，

map-keys($map)

，

map-values($map)

等，具体可参考sass Functions（搜索

Map Functions

即可）

定义

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用：

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}

//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}

3.嵌套，包括选择器嵌套和属性嵌套，其中在选择器嵌套中，可以使用&表示父元素选择器。具体查看以下列表：

选择器嵌套，一般会使用选择器嵌套。

//sass style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;

&:hover{
color:#ddd;
}
}
}

//css style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_nav li{
float:left;
}
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_nav a:hover{
color:#ddd;
}

属性嵌套：

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：

//sass style
//-------------------------------
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}

//css style
//-------------------------------
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}

当然这只是个属性嵌套的例子，一般不会这么用。

@at-root

@at-root是用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

普通跳出嵌套

//sass style
//-------------------------------
//没有跳出
.parent-1 {
color:#f00;
.child {
width:100px;
}
}

//单个选择器跳出
.parent-2 {
color:#f00;
@at-root .child {
width:200px;
}
}

//多个选择器跳出
.parent-3 {
background:#f00;
@at-root {
.child1 {
width:300px;
}
.child2 {
width:400px;
}
}
}

//css style
//-------------------------------
.parent-1 {
color: #f00;
}
.parent-1 .child {
width: 100px;
}

.parent-2 {
color: #f00;
}
.child {
width: 200px;
}

.parent-3 {
background: #f00;
}
.child1 {
width: 300px;
}
.child2 {
width: 400px;
}

@at-root (without: ...)
和
@at-root (with: ...)

默认

@at-root

只会跳出选择器嵌套，而不能跳出

@media

或

@support

，如果要跳出这两种，则需使用

@at-root (without: media)

，

@at-root (without: support)

。这个语法的关键词有四个：

all

（表示所有），

rule

（表示常规css），

media

（表示media），

support

（表示support，因为

@support

目前还无法广泛使用，所以在此不表）。我们默认的

@at-root

其实就是

@at-root (without:rule)

。

@at-root
与
&
配合使用（&表示父元素选择器）

//sass style
//-------------------------------
.child{
@at-root .parent &{
color:#f00;
}
}

//css style
//-------------------------------
.parent .child {
color: #f00;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航