Sass

mating 发布于2019-08-29 12:39 / 1002人阅读

摘要：用法指南阮一峰官方文档安装安装编译选项编译格式添加调试开启信息变量计算嵌套使用引用父元素注释继承可重用代码块。指定参数和缺省值颜色函数插入文件条件语句循环语句自定义函数

Sass

Sass用法指南 - 阮一峰

官方文档

安装

安装ruby

gem install sass

编译选项

// 编译格式
sass --watch input.scss:output.css --style compact
// 添加调试map
sass --watch input.scss:output.css --sourcemap
// 开启debug信息
sass --watch input.scss:output.css --debug-info

变量

$blue : #1875e7;
div {
  color : $blue;
}

$side : left;
.rounded {
  border-#{side}-radius: 5px;
}

计算

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

嵌套

div h1 {
  color: red;
}

div {
  h1 {
    color: red;
  }
}

p {
  border: {
    color: red;
  }
}

a {
  &:hover { color: #ffb3ff; }
}
/* 使用&引用父元素 */

注释

/* comment */

// comment

/*!
    important comments!
*/

继承

.class1 {
  border: 1px slid #ffffd;
}

.class2 {
  @extend .class1;
  font-size: 120%;
}

Mixin

可重用代码块。

@mixin left {
  float: left;
  margin-left: 10px;
}

div {
  @include left;
}

指定参数和缺省值：

@mixin left($value: 10px) {
  float: left;
  margin-right: $value;
}

div {
  @include left(20px);
}

example：

@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-#{$vert}-#{$horz}-radius: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px) }

颜色函数

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

插入文件

@import "path/filename.scss";

@import "foo.css";

条件语句

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
}

@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;
}

循环语句

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

自定义函数

#function double($n) {
  @return $n * 2;
}

#sidebar {
  width: double(5px);
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112047.html

CSS 强化装备！Sass 安装与使用

摘要：不过必须要先安装，然后再安装。淘宝镜像安装由于国内网络原因你懂的，导致存放在上面的资源文件间歇性连接失败。嵌套可以进行选择器的嵌套，表示层级关系。重要注释管理项目文件结构预处理器的特点之一是可以把你的代码分割成很多文件，而且不会影响性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...

wuyumin 2019-08-28 18:19 评论0 收藏0
sass的基本使用

摘要：本文所有的例子都是在中编译，而可以自行编译，具体可以查看该链接配置的概念定义是的一种预处理器，文件后缀名为，可以用中的来转成样式。最近在项目中利用到了css预处理器（sass），而之前没接触过的本博主出于好奇心，就在业余的时间里搜了一些资料来看看，看完后觉得sass挺不错，就想简单的介绍一下sass的基本使用方法（ps：本文只介绍sass的一些基本使用，而这些内容都是本博主觉得比较有...

alighters 2019-08-30 15:53 评论0 收藏0
Sass

摘要：同样的在下安装有多种方法。这样的文件，命名规范是以下划线开头的，这样的文件不会被编译成文件。这个特性现在正被众多开发者滥用。就是取值的一种特殊形式，符合特殊用法。函数名称参数列表数据处理继承允许一个选择器，继承另一个选择器。 sass介绍 • SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单且可维护。 • SASS的本...

StonePanda 2019-08-30 14:04 评论0 收藏0
Sass

摘要：同样的在下安装有多种方法。这样的文件，命名规范是以下划线开头的，这样的文件不会被编译成文件。这个特性现在正被众多开发者滥用。就是取值的一种特殊形式，符合特殊用法。函数名称参数列表数据处理继承允许一个选择器，继承另一个选择器。 sass介绍 • SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单且可维护。 • SASS的本...

pcChao 2019-08-22 15:01 评论0 收藏0
Sass

摘要：同样的在下安装有多种方法。这样的文件，命名规范是以下划线开头的，这样的文件不会被编译成文件。这个特性现在正被众多开发者滥用。就是取值的一种特殊形式，符合特殊用法。函数名称参数列表数据处理继承允许一个选择器，继承另一个选择器。 sass介绍 • SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单且可维护。 • SASS的本...

alexnevsky 2019-08-01 18:40 评论0 收藏0
[Sass]-Sass入门

摘要：未编译样式多继承链式继承占位选择器编译后样式中使用声明混合，可以传递参数，参数名以符号开始，多个参数以逗号分开，也可以给参数设置默认值。初识Sass SASS简介 sass是一种css预处理器，用专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。Sass是CSS3的扩展，它增加了嵌套规则，变量，mixins，选择器继承等等。Sass生成格式良好的CSS，使样式表更易于组...

godiscoder 2019-08-29 13:27 评论0 收藏0