专栏首页达达前端【一起来烧脑】一步Sass学会体系

【一起来烧脑】一步Sass学会体系

CSS 的辅助工具 增加了变量,嵌套,混合,导入 等高级功能

image.png

# Convert Sass to SCSS
$ sass-convert style.sass style.scss
 
# Convert SCSS to Sass
$ sass-convert style.scss style.sass

使用变量

变量声明

Sass变量声明和CSS属性的声明很像:

$highlight-color: #F90;
$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;
}
 
//编译后
a {
  color: blue;
}

嵌套CSS规则

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
#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 }

父选择器标识符& 下面这种情况sass就无法正常工作:

article a {
  color: blue;
  :hover { color: red }
}
article a {
  color: blue;
  &:hover { color: red }
}

群组选择器的嵌套

.button, button {
  margin: 0;
}

.container h1, .container h2, .container h3 { margin-bottom: .8em }

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
    dl > {
        dt { color: #333 }
        dd { color: #555 }
  }
    nav + & { margin-top: 0 }
}

Sass 导入SASS文件 Sass的@import规则在生成css文件时就把相关文件导入进来

$link-color: blue;
$link-color: red;
a {
color: $link-color;
}

.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }

/*...*/的注释语法

Sass 混合器 混合器使用@mixin标识符定义

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
 
//sass最终生成:
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

放在@include被调用的地方

选择器继承 通过@extend语法实

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

使用sass编写清晰、无冗余、语义化的css


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hexo博客主题优化

    在 themes/*/source/css/_custom/custom.styl 中添加如下代码:

    达达前端
  • Web前端社交账号注册按钮

    达达前端
  • 开源项目

    https://github.com/PanJiaChen/vue-element-admin

    达达前端
  • 一篇文章带你了解CSS3按钮知识

    在实际开发中,按钮的应用是必不可少。使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式。

    前端皮皮
  • 《CLR via C#》Part2之Chapter4 类型基础(二)

    CLR最重要的特性之一是安全性,在运行时,通过调用GetType(),总是知道一个对象的确切类型。

    Isaac Zhang
  • JavaScript实现在线生成二维码

    二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图案表示二进制数据,被设备扫描后可获取其中所包含的信息。

    何处锦绣不灰堆
  • 3分钟理解 支持向量机中最出神的第一笔

    之前推送过SVM,今天,又有了更容易理解SVM的目标函数和约束怎么得来的思路,因此,记录下来,与大家一起分享。

    double
  • 「R」表格可视化 10+ 指南【正式篇】

    原文:https://themockup.blog/posts/2020-09-04-10-table-rules-in-r/ Rmd[1]

    王诗翔呀
  • 云+社区技术沙龙:微信小程序敏捷开发实战 报名开启

    2018伊始,最火爆的不是春晚和红包,而是从天而降的“跳一跳”。这款来自微信的轻量级小游戏,以2800万人/小时的惊人PCU数据,稳据小游戏排行榜首位。如果你还...

    云加社区技术沙龙
  • IBM正从科技巨头端滚落 2020年硬件业务将全部完蛋

    你现在几乎就可以看到2020年的业界头条新闻了:IBM出售仅余硬件业务给__(填充题)。我想,这经由标题应该就能轻易地琢磨出答案来了。 蓝色巨人(Big Blu...

    人称T客

扫码关注云+社区

领取腾讯云代金券