Sass와 Compass를 만나다 - Sass 장

백엔드에서 프론트엔드로 전환하는 웹 개발자에게 가장 큰 고민은 CSS를 작성하는 것입니다. CSS를 아는 사람이라면 누구나 웹 페이지 스타일을 개발할 수 있다는 것을 알지만 프로그래밍에는 사용할 수 없다는 느낌이 듭니다. . 향후 유지 관리를 용이하게 하려면 CSS 문장의 상당 부분만 문장별로 수정하거나 다시 작성할 수도 있습니다. 백엔드 인력이 프론트엔드 산업으로 유입되면서 CSS는 새로운 생명력을 얻게 되었습니다. 사람들은 CSS에 프로그래밍 요소, 즉 "CSS 전처리기"를 추가하기 시작했습니다. 기본 아이디어는 특수 프로그래밍 언어를 사용하여 웹 페이지 스타일을 디자인한 다음 이를 일반 CSS 파일로 컴파일하는 것입니다. 아래에서는 공식 문서와 Ruan Yifeng 선생님의 사용 가이드를 결합하여 Sass의 주요 사용법을 체계적으로 요약했습니다.

1. Sass 설치

Sass는 Ruby 언어로 작성되어 있으므로 Sass를 설치하기 전에 Ruby를 설치하는 과정은 자세히 설명하지 않습니다. 명령줄(cmd의 창)에서 다음 명령을 직접 입력할 수 있습니다.

gem install sass

2. Sass 사용

Sass 파일은 접미사 .sass와 .scss 두 개가 붙은 일반 텍스트 파일입니다. . 접미사 .sass가 있는 파일의 인코딩 스타일에는 중괄호 추가가 필요하지 않지만 다음과 같이 들여쓰기 및 기타 작업을 처리해야 합니다.

*
    margin:0;
    padding:0;

접미사 .scss가 있는 파일의 인코딩 스타일이 선호됩니다. 일반적인 CSS 스타일은 다음과 같습니다.

*{
    margin:0;
    padding:0;
}

Sass 관계자는 두 스타일을 동시에 업데이트하므로 어떤 스타일을 선호하는지는 개인 취향에 따라 다릅니다. 저는 .scss 파일 접미사를 선호하므로 다음 예는 기반이 됩니다. .scss 파일 스타일.

다음 명령은 .scss 파일에서 변환된 CSS를 화면에 표시할 수 있습니다(파일 이름이 test라고 가정)

sass test.scss

.scss 파일을 직접 변환하려는 경우 css 파일, 따르기 뒤에 .css라는 파일 이름이 와야 합니다.

sass test.scss test.css

Sass는 네 가지 컴파일 스타일 옵션을 제공합니다.

* nested: 嵌套缩进的css的代码，默认
* expanded：没有缩进、扩展的css代码
* compact：简介格式的css代码
* compressed：压缩后的css代码

다음 명령을 사용하여 컴파일 스타일

sass --style compressed test.scss test.css

또한 Sass가 특정 파일이나 디렉터리를 모니터링하도록 할 수 있습니다. 소스 파일이 변경되면 자동으로 컴파일된 버전이 생성됩니다

//  watch a file

sass --watch test.scss:test.css

//  watch a direcoty

sass --watch app/sass:public/stylesheets

webStrom을 사용하여 개발하면 File Watcher를 추가할 수 있지만 전체 디렉터리를 켜서 모니터링하는 것만큼 기분이 좋지 않습니다. 한 가지 주목할 점은 서로 다른 배치 프로세스가 서로 다른 파일 확장자에 해당한다는 것입니다. .sass 파일과 scss.bat는 .scss 파일에 해당합니다

3. Sass의 기본 사용법

3.1 가져오기

Sass의 가져오기(@import) 규칙이 다릅니다. CSS@import 가져오기의 단점을 검토해 보겠습니다. CSS는 파일을 @importing하므로 해당 파일을 참조하는 CSS 파일을 다운로드하고 구문 분석한 후에만 브라우저가 이를 알 수 있습니다. 다운로드해야 하는 또 다른 CSS입니다. 그런 다음 다운로드한 다음 트리 및 일련의 기타 작업을 다운로드한 후 렌더링 구문 분석 및 빌드를 시작하면 CSS를 병렬로 다운로드할 수 없게 됩니다. 그러나 Sass를 임포트(@import)하면 @import의 scss 파일은 컴파일 중에 하나의 CSS 파일로만 병합됩니다. 하지만 @import 'reset.css'와 같은 CSS 파일을 sass 파일로 가져오면 일반 CSS 가져오기 스타일 파일과 효과는 동일하지만 가져온 CSS 파일은 컴파일된 파일에 병합되지 않고 존재하게 됩니다. @import 모드에서.

모든 Sass 가져오기 파일은 접미사 .scss를 무시할 수 있습니다. 일반적으로 기본 파일 명명 방법은 mixin.scss와 같이 시작됩니다. 이런 종류의 파일은 가져올 때 밑줄을 그을 필요가 없지만 @import "mixin"으로 쓸 수 있습니다.

가져온 sass 파일 a.scss:

//a.scss
//-------------------------------
body {
  background: #eee;
}

가져와야 할 sass 파일 b.scss:

@import "reset.css";
@import "a";
p{
  background: #0982c1;
}

번역된 b.css 스타일 :

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

위 코드에서 볼 수 있듯이, b.scss가 컴파일된 후에도 Reset.css는 계속 import되고, a.scss는 통합됩니다.

3.2 주석

Sass에는 두 가지 주석 방법이 있는데, 하나는 표준 CSS 주석 방법 /* */이고, 다른 하나는 // 이중 슬래시 형식의 한 줄 주석입니다. 그러나 이러한 한 줄 주석은 번역되지 않습니다. 표준 CSS 주석

/*
 *我是css的标准注释
 *设置body内距
 */
body{
  padding:5px;
}

이중 슬래시 한 줄 주석 한 줄 주석은 JavaScript 언어의 주석과 동일하며 슬래시(//)를 사용하지만 CSS에는 한 줄 주석이 입력되지 않습니다. .

//我是双斜杠表示的单行注释
//设置body内距
body{
     padding:5px; //5px
}

3.3 变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

3.3.1 普通变量

定义之后可以在全局范围内使用。

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//css style
//-------------------------------
body{
    font-size:12px;
}

3.3.2 默认变量

sass的默认变量仅需要在值后面加上!default即可。

//sass style
//-------------------------------
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:1.5;
}

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可

//sass style
//-------------------------------
$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:2;
}

可以看出现在编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。

3.3.3 特殊变量

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

//sass style
//-------------------------------
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

3.3.4 多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

3.3.4.1 list

list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考sass Functions（搜索List Functions即可） 定义

//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

使用

//sass style
//-------------------------------
$linkColor:         #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

3.3.4.2 map

map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具体可参考sass Functions（搜索Map Functions即可） 定义

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

3.4 嵌套(Nesting)

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

3.4.1 选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。 在选择器嵌套中，可以使用&表示父元素选择器

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

3.4.2 属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

3.5 混合(mixin)

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

3.5.1 无参数mixin

//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

3.5.2 有参数mixin

//sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
//-------------------------------
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}

3.5.3 多个参数mixin

调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

//sass style
//-------------------------------   
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

//css style
//-------------------------------
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

3.5.4 多组值参数mixin

如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。

//sass style
//-------------------------------   
//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

//css style
//-------------------------------
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

3.5.5 @content

@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

//sass style
//-------------------------------                     
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}

3.6 继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

3.6.1 普通继承

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

3.6.2 占位选择器%

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

ps：在@media中暂时不能@extend @media外的代码片段，以后将会可以。

3.7 函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

//sass style
//-------------------------------                     
$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

3.8 运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;

//grid 
$_columns:                     12 !default;      // Total number of columns
$_column-width:                60px !default;   // Width of a single column
$_gutter:                      20px !default;     // Width of the gutter
$_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width

3.9 条件判断及循环

3.9.1 @if判断

@if可一个条件单独使用，也可以和@else结合多条件使用

//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

3.9.2 三目判断

语法为：if($condition, $iftrue, $iffalse) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

3.9.3for循环

for循环有两种形式，分别为：@for $var from through 和@for $var from to 。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

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

//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

3.9.4 @each循环

语法为：@each $var in 。其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

3.9.4.1 单个字段list数据循环

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

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

3.9.4.2 多个字段list数据循环

//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}

3.9.4.3多个字段map数据循环

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}