CSS教程

scss 速记

本文主要是介绍scss 速记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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 速记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!