sass入门（一）

最新推荐文章于 2024-09-11 20:31:47 发布

the_lower

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量241

点赞数

分类专栏： sass 文章标签： css

本文链接：https://blog.csdn.net/the_lower/article/details/107413245

版权

sass 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一. $声明变量

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;
}

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; //在声明变量时，变量值也可以引用其他变量
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

$link-color: blue;
a {
  color: $link_color; //$link-color和$link_color其实指向的是同一个变量。实际上，在sass的大 多数地方，中划线命名的内容和下划线命名的内容是互通的
}

//编译后

a {
  color: blue;
}

二. 嵌套css规则
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}
//容器元素的样式规则会被单独抽离出来，而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。
#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

例外：在嵌套的选择器里边立刻应用一个类似于：hover的伪类，sass提供了一个特殊结构&

article a {
  color: blue;
  &:hover { color: red }
}
//编译成：
article a { color: blue }
article a:hover { color: red }

#content aside {
  color: red;
  body.ie & { color: green } //通过JavaScript在<body>标签上添加一个ie的类名
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
/*编译为：*/
#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; 
   }

群组选择器：

.container {
  h1, h2, h3 {margin-bottom: .8em}
} 
//编译成：
.container h1, .container h2, .container h3 { margin-bottom: .8em }

nav, aside {
  a {color: blue}
}
//编译成：
nav a, aside a {color: blue}

子组合选择器和同层组合选择器：>、+和~：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
//编译成：

article ~ article { border-top: 1px dashed #ccc }  //兄弟选择器
article > footer { background: #eee }  //直接后代选择器
article dl > dt { color: #333 }  
article dl > dd { color: #555 }
nav + article { margin-top: 0 }  //相邻选择器

嵌套属性：

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
//编译成：
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
//编译成：
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

the_lower

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录