sass 预处理样式-笔记

基础

变量

SCSS允许你定义变量，可以在样式表中重复使用。例如，你可以定义一个颜色变量，并在整个样式表中使用它

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

嵌套

SCSS允许你嵌套CSS规则，这可以使你的代码更加整洁和易于维护。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

混合（Mixin）

混合是一种可以重复使用的代码块。你可以在混合中包含CSS声明，然后在需要的地方包含这个混合。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { 
  @include border-radius(10px); 
}

继承（Extend/Inheritance）

SCSS允许你共享一组CSS声明，你可以创建一个CSS规则，然后让其他选择器继承这个规则。

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

条件语句

SCSS支持使用@if、@else if、@else进行条件判断。

@mixin respond-to($media) {
  @if $media == 'phone' {
    @media (max-width: 600px) { @content; }
  } @else if $media == 'tablet' {
    @media (max-width: 900px) { @content; }
  }
}

.container {
  @include respond-to('phone') {
    background: red;
  }

  @include respond-to('tablet') {
    background: blue;
  }
}

循环

SCSS支持使用@for、@each、@while进行循环。

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / 3 * $i;
  }
}

函数

SCSS支持自定义函数，你可以创建一个函数，然后在需要的地方调用这个函数。

@function calculate-rem($size) {
  $rem-size: $size / 16px;
  @return #{$rem-size}rem;
}

body {
  font-size: calculate-rem(16px);
}

h1 {
  font-size: calculate-rem(32px);
}

插值

SCSS支持插值，你可以在选择器、属性名、属性值等地方使用变量。

$base-class: "button";
$states: ("default", "primary", "success", "danger");

@each $state in $states {
  .#{$base-class}-#{$state} {
    // styles for each state
    background-color: lighten($primary-color, 10%);
  }
}

嵌套属性

SCSS允许你嵌套属性，这可以使你的代码更加整洁。

nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}

.box {
  margin: {
    top: 10px;
    bottom: 20px;
  };
  padding: {
    left: 5px;
    right: 5px;
  };
}

嵌套媒体查询

SCSS允许你在规则内部使用媒体查询，这可以使你的代码更加整洁。

.container {
  width: 100%;
  
  @media (min-width: 600px) {
    width: 80%;
  }

  @media (min-width: 900px) {
    width: 60%;
  }
}

进阶

嵌套选择器

SCSS允许你嵌套选择器，这可以使你的代码更加整洁。

.parent {
  .child {
    .grandchild {
      color: red;
    }
  }
}

高级循环

SCSS支持使用map数据类型进行循环。

$colors: (primary: #3498db, secondary: #2ecc71, danger: #e74c3c);

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
}

高级函数（带有默认参数）

SCSS支持自定义函数，并且函数可以有默认参数。

@function calculate-rem($size, $base: 16px) {
  @return #{$size / $base}rem;
}

body {
  font-size: calculate-rem(16px); // 1rem
}

h1 {
  font-size: calculate-rem(32px); // 2rem
}

复杂条件语句

SCSS支持使用@if、@else if、@else进行复杂的条件判断。

@mixin respond-to($media) {
  @if $media == 'phone' {
    @media (max-width: 600px) { @content; }
  } @else if $media == 'tablet' {
    @media (max-width: 900px) { @content; }
  } @else if $media == 'desktop' {
    @media (min-width: 901px) { @content; }
  }
}

.container {
  @include respond-to('phone') {
    background: red;
  }

  @include respond-to('tablet') {
    background: blue;
  }

  @include respond-to('desktop') {
    background: green;
  }
}

导入文件

SCSS支持使用@import导入其他SCSS文件。

// _reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// styles.scss
@import 'reset';
@import 'variables';

body {
  color: $primary-color;
}

使用 @content 传递块内容

SCSS的混合可以接受一个内容块，并在混合内部使用@content插入这个内容块。

@mixin apply-to-mobile {
  @media (max-width: 600px) {
    @content;
  }
}

.header {
  @include apply-to-mobile {
    background-color: red;
  }
}

使用 @at-root 解除嵌套

SCSS支持使用@at-root将嵌套的规则移动到根级别。

.container {
  .item {
    @at-root .item-#{$index} {
      color: blue;
    }
  }
}

使用 @debug、@warn 和 @error

SCSS支持使用@debug、@warn和@error输出调试信息。

$font-stack: Helvetica, sans-serif;

@mixin check-font($font) {
  @if $font == 'Comic Sans' {
    @error "Comic Sans is not allowed!";
  } @else {
    font-family: $font;
  }
}

body {
  @include check-font($font-stack);
}

使用 @while 循环

SCSS支持使用@while进行循环。

$i: 6;

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

操作颜色函数

SCSS提供了一些内置函数，可以操作颜色。

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: lighten($primary-color, 10%);
  }
  &:active {
    background-color: darken($primary-color, 10%);
  }
}

使用 map 数据类型

SCSS支持使用map数据类型，map是一种键值对的集合。

$sizes: (
  small: 10px,
  medium: 20px,
  large: 30px
);

@mixin size($size) {
  font-size: map-get($sizes, $size);
}

.text-small {
  @include size(small);
}

.text-medium {
  @include size(medium);
}

.text-large {
  @include size(large);
}