标签：scss color text 速记 width animal shadow border

CSS 功能拓展

嵌套

#main p {
  color: #00ff00;

  .redbox {
    color: #000000;
  }
}

属性嵌套

个人基本没怎么用过。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

父选择器 &

a {
  font-weight: bold;
  &:hover {
    text-decoration: underline;
  }
  body.firefox & {
    font-weight: normal;
  }
  &-sidebar {
    border: 1px solid;
  }
}

占位符选择器 %

与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中。

注释

• 多行注释 /* */，编译后保留；
• 单行注释 //，编译后去除。

变量 $

$width: 5em; // 全局
$width: 6rem !default; // 设置默认值
#main {
  $width: 5em; // 局部
  width: $width;
}
#main {
  $width: 5em !global; // 全局
  width: $width;
}

数据类型

• 数字：1, 2, 13, 10px；
• 字符串：有引号字符串与无引号字符串，"foo", 'bar', baz；
• 颜色：blue, #04a3f9, rgba(255,0,0,0.5)；
• 布尔：true, false；
• 空值：null
• 数组：用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif；
  • 独立的值也被视为数组 —— 只包含一个值的数组;
  • 数组中可以包含子数组，内外层使用不同分隔符或使用括号，1px 2px, 5px 6px，(1px 2px) (5px 6px)
• maps：相当于 JavaScript 的 object，(key1: value1, key2: value2)

运算

数字运算

• 普通运算，+, -, *, /, %；
• 关系运算，<, >, <=, >=；
• 相等运算, ==, !=。

颜色值运算

插值语句 #{}

通过 #{} 插值语句可以在选择器或属性名中使用变量。

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

指令 @rule

导入文件 @import

// 多文件导入，默认拓展名.scss .sass
@import 'rounded-corners', 'text-shadow';

// 使用插值语法
$family: unquote('Droid+Sans');
@import url('http://fonts.googleapis.com/css?family=\#{$family}');

分音

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。
例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

@import 'colors';

嵌套 @import

// example 文件
.example {
  color: red;
}

#main {
  @import 'example'; // 等价下面

  .example {
    color: red;
  }
}

继承 @extend

.error {
  border: 1px #f00;
}
a:hover {
  text-decoration: underline;
}
.seriousError {
  @extend .error;
  @extend a:hover;
  border-width: 3px;
}

控制指令

条件 @if @else if @else

p {
  @if 1 + 1 == 2 {
    border: 1px solid;
  } @else if {
    border: 2px dotted;
  } @else {
    color: black;
  }
}

循环 @for @while

• @for $var from <start> through <end>，包含<end>；
• @for $var from <start> to <end>，不包含<end>。

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

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

迭代器 @each

• $var in <list>。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

// 类似 js 解构语法 每一项结构为 $animal, $color, $cursor
@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

混入 @mixin @include

// 定义
@mixin large-text {
  color: #ff0000;
}

// 引用
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

// 携带参数，并可以设置默认值
@mixin sexy-border($color, $width: 3rem) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  // 顺序参数
  @include sexy-border(blue, 1in);
  // 指定参数
  @include sexy-border($color: blue);
}

// 解构与打包，类似 js，只不过...后置
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

标签：scss,color,text,速记,width,animal,shadow,border
来源： https://www.cnblogs.com/mengyuantongxue/p/16180807.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。