Sass - 어쩌면 CSS를 가지고 놀고 싶을 수도 있습니다(1부)

우리는 열심히 일하고, 끈기 있게 노력하며, 서로를 격려합니다!

우리 모두 알고 있듯이 CSS는 실제로 프로그래밍 언어가 아닙니다. CSS에 익숙한 사람이라면 CSS의 전체 이름이 Cascading Style Sheets(Cascading Style Sheets)라는 것을 알고 있습니다. HTML(Standard Generalized Markup Language)을 표현하는 데 사용되는 애플리케이션입니다. ) 또는 XML(Standard Generalized Markup Language) 및 기타 파일 스타일 컴퓨터 언어입니다. 우리는 이를 프리젠테이션 레이어와 구조 레이어의 분리, 즉 html과 스타일의 분리를 달성하기 위해 사용합니다. 웹페이지 스타일을 지정하는 데 사용할 수 있지만 변수를 선언하거나 함수를 호출하거나 JavaScript와 같은 조건문을 사용할 수는 없습니다. JavaScript는 유연하고 동적이지만 CSS는 엄격하고 변하지 않습니다.

그래서 누군가가 여기에 프로그래밍 아이디어를 추가하여 순회, 메서드, 심지어 상속까지 가질 수 있고 문법 오류를 알려줄 수 있기를 원하므로 css 전처리를 사용하여 이 아이디어는 다음과 같습니다. 먼저 새로운 전문 프로그래밍 언어를 사용하여 웹 페이지 스타일을 디자인한 다음 이를 CSS로 컴파일합니다. 실제로 최종 참조는 여전히 컴파일된 CSS입니다.

CSS 전처리에 관해 대부분의 사람들은 먼저 Less를 생각할 것입니다. Less는 현재 CSS 전처리를 위한 더 나은 언어 중 하나입니다. 빠르고 편리하며 시작하기 쉽습니다. Sass가 두 번째 언어입니다. 상대적으로 말하자면 더 유연하고 더 많은 구문을 가지고 있습니다(특히 if, else, for) ) 물론, 많은 사람들이 사용하지 않는 이유는 설치가 불편하기 때문입니다(다행히 타오바오 미러가 있습니다). 세 번째 이유는 스타일러스입니다. 스타일러스는 Sass와 유사하며 더 유연하고 강력합니다. 여기서는 Sass를 선호하고 Sass가 그렇게 빨리 죽지 않을 것이라고 믿기 때문에 Sass에 대해 간략하게 소개하겠습니다.

CSS 전처리를 언제 사용할 수 있는지 생각해 보세요

CSS 전처리를 사용하면 스타일을 더 프로그래밍 방식으로 처리할 수 있다는 것은 사실이지만 여전히 그것이 사용되는 환경을 고려해야 합니다. 왜냐하면 Sass 코드가 얼마나 멋지고 논리가 얼마나 엄격한지에 관계없이, 결국 CSS 파일이 생성되었습니다(늙은 선배들이 어린 나에게 전하는 가르침).

따라서 프로젝트 규모와 개발 시간, 팀 비용을 기준으로 결정해야 합니다. 프로젝트가 상대적으로 작고 CSS가 많이 필요하지 않으며 개발 시간이 빡빡하고 팀에 많은 사람이 필요합니다. 사용 방법을 모르면 기본 CSS를 더 잘 사용할 수 있습니다.

기본사항

설치~

에헴 원래 많은 개발자들이 Sass를 사용하고 싶어 했다고 해야되나, Sass는 Ruby 기반이기 때문에 벽이 높고 Ruby를 오랫동안 설치할 수 없어 포기했습니다. W3Cplus 튜토리얼을 살펴보고 Taobao 이미지를 사용하여 설치하는 것이 좋습니다. Taobao 이미지를 사용하여 노드를 포함한 일부 패키지를 설치했습니다.

컴파일~

에헴, 많은 친구들이 설치했지만 컴파일하는 것이 매우 번거롭다고 느꼈습니다. 여기서는 계속해서 Sass 컴파일 튜토리얼을 링크합니다. Koala는 업데이트를 중단했지만 실제로는 less와 sass 모두 컴파일할 수 있으며 컴파일 중에 압축할 수 있습니다.

sass와 scss

먼저 차이점을 살펴보겠습니다

<span style="color: #800000;">$color : red;

//sass语法
.box
    color:$color;

//scss语法
.box</span>{<span style="color: #ff0000;">
　　color</span>:<span style="color: #0000ff;">$color</span>;
}

사실 sass 구문은 sass의 초기 문법 구조로, 탭 들여쓰기를 통해 구현되는 규칙입니다. 게다가 이 문법 규칙이 매우 엄격합니다. 잘못된 것이 있으면 컴파일 중에 수정됩니다.

Scss는 sass의 새로운 구문 형식입니다. 또 다른 전처리 언어라고 생각하지 마세요. 사실 이전 문법 구조가 너무 엄격하고 다소 다르다는 사실을 발견하고 다시 맞춤화한 sass 구문입니다. from css. 구조는 기본적으로 CSS와 동일하며, 이전 CSS 코드를 직접 복사할 수 있습니다.

여기 코드 블록에 쓴 내용은 실제로 파일 이름이 각각 .sass와 .scss로 끝납니다.

변수 선언 및 호출

이것은 Sass의 기본 프로그래밍 요소 중 하나입니다. JS에서는 var를 사용하여 변수를 선언합니다. 물론 ES6에서는 let과 const가 새로 추가되었습니다. Sass에서 변수를 선언하고 호출하는 규칙은 다음과 같습니다

<span style="color: #800000;">$height: 15px !default;  //声明默认变量
$height: 50px;　　//声明普通变量
body</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> $height</span>; 
}

변수는 기본 변수와 일반 변수로 나눌 수 있습니다. 기본 변수의 경우 !important와 같이 값 뒤에 !default를 추가하면 됩니다. 실제로 일반적으로 일반 변수만 선언하면 됩니다. 컴포넌트를 개발할 때는 기본 변수를 사용하는 것이 더 편리합니다. 변수 선언을 설명할 필요도 없고 정말 간단합니다.

중첩 및 지역 변수, 전역 변수

JS와 마찬가지로 sass 구문에도 지역변수와 전역변수가 있습니다. 아래와 같이 전역 변수는 가장 바깥쪽 레이어에 선언되어 있으며 전역 범위에서 호출할 수 있습니다. em의 지역 변수는 em{}에 선언되어 있으며 em{} 내에서만 호출할 수 있습니다.

<span style="color: #800000;">$color:#000;　　//全局变量
.block </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> $color</span>;
}<span style="color: #800000;">
em </span>{<span style="color: #ff0000;">
  $color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">　　//局部变量
  a {    //选择器嵌套
    color</span>:<span style="color: #0000ff;"> $color</span>;<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> {    //属性嵌套
　　  size: 12px</span>;<span style="color: #ff0000;">
　　  weight</span>:<span style="color: #0000ff;"> bold</span>;
　  }<span style="color: #800000;">
    &:hover </span>{ //伪类嵌套<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;"> $color</span>;
    }<span style="color: #800000;">   
  }
}</span>

数据类型

 和JS类似，sass也拥有自己的数据类型分别是

• 数字: 如，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。

混合宏

编程的思想嘛。混合宏是一个类似于函数的存在，当然，他并不是函数。简单来说就是加了参数功能的灵活度提升的可重用的代码块。

<span style="color: #800000;">@mixin border-radius</span>{<span style="color: #ff0000;">
    -webkit-border-radius</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 5px</span>;
}<span style="color: #800000;">

button </span>{<span style="color: #ff0000;">
    @include border-radius;
</span>}

这里是一个简单的混合宏的使用，先是用@mixin定义了一个名叫border-radius的混合宏，然后在代码中利用@include进行调用，其实这样的话并不能太大体现出混合宏的特色。看下面的

<span style="color: #800000;">@mixin border-radius1($radius)</span>{<span style="color: #ff0000;">
  -webkit-border-radius</span>:<span style="color: #0000ff;"> $radius</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> $radius</span>;
}<span style="color: #800000;">
@mixin border-radius2($radius:5px)</span>{<span style="color: #ff0000;">
  -webkit-border-radius</span>:<span style="color: #0000ff;"> $radius</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> $radius</span>;
}<br><br><span style="color: #800000;">
.box1 </span>{<span style="color: #ff0000;">
  @include border-radius(5px);
</span>}<span style="color: #800000;">
.box2 </span>{<span style="color: #ff0000;">
  @include border-radius;
</span>}<span style="color: #800000;">
.box2 </span>{<span style="color: #ff0000;">
  @include border-radius(5px);
</span>}

从代码里可以看出，混合宏可以像函数一样传入参数，并且可以像ES6的函数扩展一样添加参数默认值，如果在调用的时候不传参数，那么就会使用默认的值，这样极大的增加了代码的灵活性，省却很多开发时间。

其实，mixin的灵活还不仅仅如此，它可以传入多个参数，这样我们想到了函数可以根据参数数量的不同来执行不同的代码。yes ！sass也可以做到！

<span style="color: #800000;">@mixin size($width,$height)</span>{<span style="color: #ff0000;">    //两个参数或者多个参数可以这样这样定义
  width</span>:<span style="color: #0000ff;"> $width</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> $height</span>;
}<span style="color: #800000;">

.box-center </span>{<span style="color: #ff0000;">
  @include size(100px,200px);
</span>}

<span style="color: #800000;">@mixin box-shadow($shadows...)</span>{<span style="color: #ff0000;">    //参数过多可以使用...来代替
  @if length($shadows) >= 1 {
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> $shadows</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> $shadows</span>;
  }<span style="color: #800000;"> @else </span>{<span style="color: #ff0000;">
    $shadows</span>:<span style="color: #0000ff;"> 0 0 2px rgba(#000,.25)</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> $shadow</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> $shadow</span>;
  }<span style="color: #800000;">
}<br></span>

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

上面两个代码块第一个比较简单，就是增加参数数目。下面的代码块我们利用sass的if else方法来实现了判断，如果参数数目大于等于1，也就是传了参数，那么我们执行上面的代码，如果没有传参我们执行下面的代码，设置默认的$shadows值生成代码块。

但是混合宏也有不足之处：那就是调用一个混合宏生成的css代码并不会进行合并，这也是因为他能够传参所设置的，所以对于复用性很强的代码块不推荐使用混合宏。

继承和占位符

sass允许你使用@extend继承别的代码块，并且通过@extend所继承的代码块会在生成css的时候进行合并~哈哈，完美解决了上面的问题

<span style="color: #800000;">.btn1 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;
}<span style="color: #800000;">

%btn2 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;
}<span style="color: #800000;">
<br></span>

%btn3 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

<span style="color: #800000;">
.btn-primary1 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  @extend .btn1;
</span>}<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  @extend %btn2;
</span>}

上面的代码中.btn1是预先定义好的类，然后我们在.btn-primary1中继承他的所有代码块，而%btn2就是在标题里所提到的占位符，占位符的代码块如果不被继承在生成的css中是不会显示出来的，所以如果你是用sass编译css的话，公共类使用占位符来定义是一个很不错的选择。为了加深理解我们看下上面的代码所生成的css代码。

<span style="color: #800000;">.btn1, .btn-primary1 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">

.btn-primary1 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>; }<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>; }

继承btn1的btn-primary1他和btn1进行了合并，而我们使用占位符定义的%btn2，%btn3在生成代码里没有显示，因为btn-primary2继承了%btn2，所以他继承的公共部分被单独拿出来，如果有多个代码块继承%btn2，他们会进行合并。

 

占位符还是混合宏，主要还是看你的代码怎么使用，如果只是静态的代码公共块，那么占位符会比较适合，而如果是可变的代码例如写一个复杂的css3动画之类的，可能混合宏比较适合了。

 

插值#{}

如果接触过jade模板的朋友会比较熟悉，这里的插值和它用法是基本一致的。让我们来看一个复杂的代码块

<span style="color: #800000;">$properties: (margin, padding);
@mixin set-value($side, $value) </span>{<span style="color: #ff0000;">
    @each $prop in $properties {
        #{$prop</span>}<span style="color: #800000;">-#</span>{<span style="color: #ff0000;">$side</span>}<span style="color: #800000;">: $value;
    }
}
.login-box </span>{<span style="color: #ff0000;">
    @include set-value(top, 14px);
</span>}

首先我们声明了一个$properties的变量，里面是一个值列表里面两个字符串，@mixin方法里我们通过@each方法循环出值列表里面的字符串然后利用插值的方法将字符串插入进去，我们看下生成的css代码

<span style="color: #800000;">.login-box </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
  padding-top</span>:<span style="color: #0000ff;"> 14px</span>; }

这里只是做一个示例，正常情况下我们不会用这么复杂的方法来生成这么短的css代码，那样才是真正的浪费开发时间，当然茶余饭后做个组件开发的话，还是很有用的。

运算

sass允许我们做一些基本的运算：加减乘除，但是我要说的是：注意单位！注意单位！注意单位！当然如果你异想天开em+px，px*px，px/rem。。。我表示。。。

需要知道的是sass里允许进行颜色运算，也就是说 #222222 * 2你将会得到 #444444，其实颜色的运算机制是分段运算也就是说如果22*2  22*2  22*2然后在进行合并的。

字符串运算：

字符串可以通过+来进行链接，放心减号是不管用的。。。需要注意的是因为sass的字符串有两种类型，带引号和不带引号，相同相加当然出来的是一致的。如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串，其实就是谁在左边就跟着谁。

<span style="color: #800000;">p:before </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> "Foo " + Bar</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> sans- + "serif"</span>;
}<span style="color: #800000;">
//生成的css如下
p:before </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> "Foo Bar"</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> sans-serif</span>; }

 

上面的内容就是sass的上篇。都是一些基础的东西，下篇的话会整理一下说到函数和方法规则相关的东西。