搜公众号
推荐 原创 视频 Java开发 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库
Lambda在线 > landmass > sass 学习笔记(二)

sass 学习笔记(二)

landmass 2019-02-15
举报

1、引用父选择器:&

// scss
a {
 color: pink;
 font-size: 16px;
 &:hover {
   text-decoration: underline;
 }
 body.box & {
   font-weight: normal;
 }
}

// ==> css
a {
 color: pink;
 font-size: 16px;
}
a:hover {
 text-decoration: underline;
}
body.box a {
 font-weight: normal;
}

    如果是一个深层嵌套的规则,在 & 替换前将完全解析父选择器。例如:

// scss
#main {
 color: black;
 a {
   font-weight: bold;
   &:hover {
     color: red;
   }
 }
}

// ==> css
#main {
 color: black;
}
#main a {
 font-weight: bold;
}
#main a:hover {
 color: red;
}

& 必须出现在符合选择器的开头,但后面可以跟一个后缀,该后缀将添加到父选择器后。例如:

// scss
#main {
 color: black;
 &-sidebar { border: 1px solid; }
}

// ==> css
#main {
 color: black;
}
#main-sidebar {
 border: 1px solid;
}

    如果父选择器不能应用后缀,则会抛出错误。


2、属性嵌套

    css 在 “命名空间” 中有很多属性,例如 font-size、font-weight、font-famliy 都在 font 命名空间。在 css 中,如果要编写同一个命名空间的一组属性,则每次都需要重复输入命名空间。现在 sass 允许将命名空间提取作为 “父选择器” ,只编写一次,子属性嵌套在 “父选择器” 下。例如:

// scss
.box {
 boder: 1px solid red;
 font: {
   weight: bold;
   size: 16px;
 }
}

// ==> css
.box {
 border: 1px solid red;
 font-weight: bold;
 font-size: 16px;
}

    注意: 命名空间 font 后紧跟着冒号 ‘:’。

    命名空间本身也可以具有值。例如:

// scss
.box {
 font: 16px sans-serif {
   weight: bold;
 }
}

// ==> css
.box {
 font: 16px sans-serif;
 font-weight: bold;
}


3、占位符选择器

    占位符选择器是一种特殊的选择器,它与 @extend 一起使用,单独出现时不会渲染成 css。例如:

// scss
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}
.message {
  @extend %message-shared;
}
.success {
  @extend %message-shared;
  border-color: green;
}

// ==> css
.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}

    占位符 equal-heights 未被渲染为 css。


4、注释

    sass 支持标准的多行注释 /* 此处是注释 */ 和 单行注释 // 此处是注释。sass 编译成 css 之后多行注释会被保留,单行注释会被删除。

    当多行注释的首字母是 ! 时,即便是在压缩模式下编译 scss 文件,多行注释也会被保留,通常在文件头部声明版本信息时使用。例如:

// scss
/*!
 这是版本信息
*/

.box {
 color: blue;
}

// ==> css
/*!
 这是版本信息
*/
.box{color: blue;}

    扩展: sass 在压缩模式下编译成 css 的命令

sass style.scss style.out.css --style compressed

    多行注释中可以插入变量,书写格式为 #{$ 变量名}。例如:

// scss
$version:
'1.0.0'
/*
 version: #{$version}
*/


// ==> css
/*
 version: 1.0.0
*/

    注意: 在多行注释中使用汉字,且同时包含变量时,在编译时会报错。

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《sass 学习笔记(二)》的版权归原作者「landmass」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注landmass微信公众号

landmass微信公众号:gh_be063b70333a

landmass

手机扫描上方二维码即可关注landmass微信公众号

landmass最新文章

精品公众号随机推荐

举报