찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >CSS 전처리기 sass 사용에 대한 튜토리얼(다중 이미지 경고)

CSS 전처리기 sass 사용에 대한 튜토리얼(다중 이미지 경고)

WBOY
WBOY원래의
2016-09-27 14:05:181561검색

CSS 전처리기는 변수, 함수, 연산, 상속, 중첩 등과 같은 CSS 동적 언어 기능을 제공하여 스타일 파일을 더 잘 구성 및 관리하고 프로젝트를 더 효율적으로 개발하는 데 도움이 됩니다. CSS 전처리기는 CSS 코드를 보다 쉽게 ​​유지 관리할 수 있어 전체 웹 페이지를 더욱 유연하고 변경 가능하게 만듭니다. 전처리기의 경우 널리 사용되는 것은 덜하고 건전합니다. 여기서는 비교가 없습니다. Sass는 Ruby 언어로 작성되므로 Sass 파일을 컴파일하려면 Ruby 환경이 필요합니다. Sass를 사용하기 위해 Ruby 언어에 대해 많이 알 필요는 없으며 Ruby 환경만 설치하면 됩니다. 노드 환경에서 덜 주로 실행되며 기능적 구문은 유사합니다. 이 글에서는 주로 Ruby에서의 sass 사용을 소개합니다.

Ruby 다운로드 및 설치:

1. http://rubyinstaller.org/

에 로그인합니다.

　

2. 다운로드를 클릭하면 이 페이지로 이동합니다. 64비트 Windows 컴퓨터의 경우 화살표가 가리키는 버전을 다운로드하세요

3.완료 후 바로 설치

마침을 클릭한 후 설치가 완료되더라도 cmd 아래의 명령줄이 아닌 Ruby 명령줄에 주의하여 설치가 성공했는지 확인해야 합니다.

연 후 명령줄을 입력하세요.

그런 다음 Ruby 아래에 sass를 설치합니다. gem install sass 명령을 입력하세요

sass -v를 입력하면 버전 번호가 표시되며 이는 설치가 성공했음을 의미합니다.

자, 다운로드 및 설치가 완료되었고, 환경설정이 완료되었습니다. 구문 및 관련 설명은 아래와 같습니다.

sass 사용.

더 많은 사람들이 진정으로 Sass 사용법을 배울 수 있도록 새 파일을 만드는 것부터 시작해 단계별로 시연해 봤습니다.

1. 바탕화면에 sasstest라는 폴더를 만들고, 그 안에 sass.scss라는 접미사가 붙은 새 파일을 만들었습니다. (새 텍스트 문서를 만든 후 이름 접미사를 sass.scss로 변경하세요.)

여기서 설명하자면, sass scss 접미사가 왜 붙나요? 실제로 sass에는 두 가지 문법 형식이 있습니다.

첫 번째는 접미사 형식의 구문인 scss입니다. 이 형식은 CSS3 구문을 확장합니다. 즉, 각 CSS 스타일 시트가 동등한 SCSS 파일임을 의미합니다. 또한 SCSS는 대부분의 CSS 해킹 및 브라우저별 접두사 구문도 지원합니다. 이 구문의 스타일 시트 파일에는 확장자가 .scss 있어야 합니다.

또 다른 최초의 구문을 들여쓰기 구문이라고 합니다. CSS를 작성하는 보다 간결한 방법을 제공합니다. 중첩된 선택자를 나타내기 위해 중괄호 대신 들여쓰기를 사용하고 속성을 구분하기 위해 세미콜론 대신 개행 문자를 사용합니다. 일부에서는 SCSS보다 읽기 쉽고 쓰기가 더 빠르다고 생각합니다. 들여쓰기 구문에는 약간의 구문 차이가 있지만 Sass의 모든 기능이 있습니다. 이 구문을 사용하는 스타일 시트 파일에는 확장자가 .sass이어야 합니다.

사실 어떤 구문을 사용하더라도 어떤 구문의 파일을 다른 구문의 파일로 직접 가져와 사용할 수 있으며 동시에 sass를 통해 서로 변환할 수도 있습니다. -명령줄 도구를 변환합니다.

이러한 차이점에 대해 걱정할 필요는 없다고 생각합니다. 첫 번째 차이점에 익숙하므로 이 기사에서는 항상 scss 구문을 사용했습니다.

2. 두 번째 단계는 물론 sass.scss를 여는 것입니다. 어떤 편집기든 사용할 수 있습니다. 이 기사에서는 숭고한 텍스트를 사용합니다.

sass를 실행하려면 명령어를 사용해야 합니다. 이제 구문은 잊어버리세요. sass.scss에 몇 줄을 입력하여 CSS로 컴파일할 수 있는지 미리 알아보세요.

입력 후 새로 생성된 폴더를 확인해보면 아무것도 없고 그대로입니다

물론, Sass 코드를 모니터링하고 실행해 본 적이 없다면 어떻게 변화가 있을 수 있겠습니까? Ruby의 명령줄 창을 기억하시나요? 예, sass가 CSS 코드를 생성할 수 있도록 거기에 실행 명령을 입력해야 합니다.

sass 파일 실행: sass input.scss output.css (왼쪽은 sass 입력 파일, 오른쪽은 CSS 출력 파일)

Sass 파일을 모니터링하는 sass 명령은 다음과 같습니다.

소위 모니터링이란 sass 파일이 변경될 때마다 그에 따라 CSS 파일이 생성되는 것을 의미합니다. 이는 일회성 모니터링이 지속적으로 수행되는 실행과는 다릅니다.

특정 sass 파일 모니터링: sass --watch input.scss:output.css (왼쪽은 sass 입력 파일, 오른쪽은 CSS 출력 파일)

전체 폴더 보기: sass --watch sass:css(왼쪽은 모니터링되는 폴더 경로를 나타내고 오른쪽은 출력 폴더 경로를 나타냄)

그런 다음 scss 코드를 실행하고 생성된 CSS를 살펴보세요. 제가 원하는 것은 sasstest 폴더 아래에 CSS 폴더를 생성하여 CSS 파일을 저장하는 것입니다.

1) 현재 폴더를 찾습니다. 데스크탑이므로 경로는 아래와 같습니다

플레이트를 넘으면 다음과 같이 특정 플레이트에 직접 입력하세요.

위의 세 가지 방법에 따라 해당 지침을 작성하세요.

2) 실행: 실행 시 css 폴더가 생성되지 않습니다. 이 경우 css 폴더를 수동으로 추가해야 합니다.

이 명령 예시:

지침: 먼저 sasstest 폴더에 들어가서 명령을 입력하세요.

결과 사진:

첫 번째는 생성된 캐시 파일입니다. CSS로 열면

이 표시됩니다.

Css 외에 맵 파일도 있습니다. sass 파일은 소스 파일에 해당하고, css는 컴파일된 파일에 해당합니다. 페이지 문제를 확인하면 CSS가 표시되지만 그렇지 않습니다. 수정해야 할 sass 파일입니다. 이 맵은 두 파일 간의 대응 테이블입니다.

파일 2개를 별도로 열기:

Css가 나온 걸 볼 수 있고, 그 파일은 그냥 대응표일 뿐이니 걱정하지 마세요.

3) 파일을 모니터링합니다. 그림과 같이 폴더를 초기 상태로 복원합니다.

sass --watch sass.scss:csssass.css 파일인 sass.scss를 모니터링하면 해당 폴더가 생성되므로 수동으로 만들 필요가 없습니다. (이 방법으로 모니터링할 수 있는 파일은 sass.scss뿐입니다. sasstest 아래에 다른 sass 파일이 있으면 모니터링할 수 없습니다.)

효과는 동일합니다.

폴더의 초기 상태를 복원하고 생성된 폴더를 삭제한 후 폴더를 모니터링하는 명령을 시도했습니다. 실제로 가장 실용적인 방법은 폴더를 모니터링하는 것입니다

폴더를 모니터링하려면 경로가 폴더의 이전 수준(이 문서에서는 데스크톱)으로 돌아가야 합니다.

그렇습니다. 달리기에 관한 모든 것입니다.

CSS 출력 형식과 관련하여 sass는 중첩, 확장, 압축, 압축의 네 가지 유형을 제공합니다.

명령 작성:

nested: 중첩(nested) 형식은 CSS 스타일과 HTML 문서 구조를 반영하기 때문에 Sass의 기본 출력 형식입니다. 각 속성은 자체 줄을 차지하지만 들여쓰기는 고정되어 있지 않습니다. 각 규칙은 중첩 깊이에 따라 들여쓰기됩니다.

expanded: 확장(expanded) 형식은 각 속성과 규칙이 자체 줄을 차지하는 손으로 직접 작성한 CSS 스타일과 비슷합니다. 규칙 내의 속성은 들여쓰기되지만 규칙에는 특별한 들여쓰기가 없습니다.

컴팩트: 컴팩트 형식은 중첩 또는 확장 형식보다 공간을 덜 차지합니다. 이 형식은 해당 속성이 아닌 선택기에 중점을 둡니다. 각 CSS 규칙에는 정의된 각 속성도 포함하는 고유한 줄이 있습니다. 중첩된 규칙은 새 줄에서 시작하고 중첩되지 않은 선택기는 구분 기호로 빈 줄을 출력합니다.

압축됨: 압축된(압축된) 형식은 가능한 한 적은 공간을 차지하며 파일 끝에 줄 바꿈이 있으며 기본적으로 필요한 구분 선택자를 제외하고는 추가 공백이 없습니다. 가장 작은 색상으로 표현을 선택하는 것과 같은 압축입니다. 가독성이 떨어진다는 뜻입니다.

Sass 구문:

시간이 부족해서 실습에서 사용한 문법코드를 올려드리겠습니다: 

<span style="color: #800000;">@charset "utf-8";
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
* CSS扩展
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">嵌套规则</span><span style="color: #008000;">*/</span><span style="color: #800000;">
#main</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    p, div{
        font-size</span>:<span style="color: #0000ff;">2em</span>;<span style="color: #ff0000;">
        a{
            font-weight</span>:<span style="color: #0000ff;"> bold</span>;
        }<span style="color: #800000;">
    }
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">引用父选择器</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a</span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> lighter</span>;<span style="color: #ff0000;">
    &</span>:<span style="color: #0000ff;">hover{
        text-decoration:underline</span>;<span style="color: #ff0000;">
        font-weight</span>:<span style="color: #0000ff;"> bolder</span>;
    }<span style="color: #800000;">
    body.firefox &</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;">red</span>;
    }<span style="color: #800000;">
}
#main</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">
    a{
        font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
        &</span>:<span style="color: #0000ff;">hover{
            color:blue</span>;
        }<span style="color: #800000;">
    }
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">嵌套属性</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fun</span>{<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;">{
        family:"微软雅黑"</span>;<span style="color: #ff0000;">
        size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
        weight</span>:<span style="color: #0000ff;">bolder</span>;
    }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 占位符选择器: %foo 
Sass 支持一种特殊类型的选择器,叫做"占位符选择器" 
](placeholder selector)。这些看起来像 class 和 id 
选择器，除了# 或.用%替换。他们需要在@extend 指令中使用;
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
*  Sassscript
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;"> 交互式 shell </span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
Interactive Shell 可以在命令行中测试 SassScript 的功能。
在命令行中输入 sass -i，然后输入想要测试的 SassScript 
查看输出结果：
sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
 变量：变量仅在它定义的选择器嵌套层级的范围内可用
 （愚人码头注：可以理解为块级作用域）。不在任何嵌
 套选择器内定义的变量则在可任何地方使用（愚人码头
 注：可以理解为全局变量）。定义变量的时候可以后面
 带上!global标志，在这种情况下，变量在任何地方可
 见（愚人码头注：可以理解为全局变量）
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
 #bod</span>{<span style="color: #ff0000;">
     $width</span>:<span style="color: #0000ff;">100px !global</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;">$width</span>;
 }<span style="color: #800000;">
 #ref</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">$width</span>;
 }
<span style="color: #008000;">/*</span><span style="color: #008000;">
数据类型：SassScript 支持 7 种主要的数据类型
数字、文本字符串、颜色、布尔值、空值、值列表 (list)、maps
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin firefox-message($select)</span>{<span style="color: #ff0000;">
    body #{$select</span>}<span style="color: #800000;">:before</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">
        content</span>:<span style="color: #0000ff;"> "hi"</span>;
    }<span style="color: #800000;">
}
@include firefox-message(".header");
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 插值 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
$name : son;
$color :blue;
p.#</span>{<span style="color: #ff0000;">$name</span>}{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#{color</span>}<span style="color: #800000;">;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> SassScript中的& 
就像当它在选择器中使用一样，SassScript中的&指向
当前父选择器。下面是一个逗号分隔的列表（list）
中包含一个空格的分隔列表（list）
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin does-parent-exist </span>{<span style="color: #ff0000;">
  @if & {
    &</span>:<span style="color: #0000ff;">hover {
      color: red</span>;
    }<span style="color: #800000;">
  } @else </span>{<span style="color: #ff0000;">
    a {
      color</span>:<span style="color: #0000ff;"> red</span>;
    }<span style="color: #800000;">
  }
}
@include does-parent-exist;
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 变量默认: !default 
 如果分配给变量的值后面添加了!default标志 ，
 这意味着该变量如果已经赋值，那么它不会被重
 新赋值，但是，如果它尚未赋值，那么它会被赋
 予新的给定值。
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
$content: "Second content?" !default;
$content: "First content";
$new_content: "First time reference" !default;

#main </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> $content</span>;<span style="color: #ff0000;">
  new-content</span>:<span style="color: #0000ff;"> $new_content</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> @media </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.silder</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
    @media screen  and (max-width</span>:<span style="color: #0000ff;"> 500px) {
        width:500px</span>;
    }<span style="color: #800000;">
}
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #</span>{<span style="color: #ff0000;">$media</span>}<span style="color: #800000;"> and ($feature: $value) </span>{<span style="color: #ff0000;">
  .sidebar {
    width</span>:<span style="color: #0000ff;"> 500px</span>;
  }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> @extend </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.error</span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px #f00</span>;<span style="color: #ff0000;">
      background-color</span>:<span style="color: #0000ff;"> #fdd</span>;
}<span style="color: #800000;">
.seriousError</span>{<span style="color: #ff0000;">
    @extend .error;
    border-width</span>:<span style="color: #0000ff;"> 3px</span>;
}<span style="color: #800000;">
#fake-links .link </span>{<span style="color: #ff0000;">
    @extend a.class;
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;
}<span style="color: #800000;">
a.class</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">blue</span>;<span style="color: #ff0000;">
    &</span>:<span style="color: #0000ff;">hover{
        color:red</span>;
    }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
@extend-Only 选择器
占位选择器看起来很像普通的 class 和 id 选择器，
只是 # 或 . 被替换成了 %。他可以像 class 或者
 id 选择器那样使用，而它本身的规则，不会被编译
 到 CSS 文件中，如下
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
#context a%extreme </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 2em</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
占位符选择器，就像class和id选择器那样可以用于扩展。
扩展选择器，将会编译成CSS，占位符选择器本身不会被
编译。例如：
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.notice </span>{<span style="color: #ff0000;">
  @extend %extreme;
</span>}
<span style="color: #008000;">/*</span><span style="color: #008000;">
!optional 标记:主要是避免扩展时如果没有某个选择器，会报错
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a.important </span>{<span style="color: #ff0000;">
  @extend .noticeqq !optional;
</span>}
<span style="color: #008000;">/*</span><span style="color: #008000;">
*
*控制指令和表达式
*
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">@if 语法</span><span style="color: #008000;">*/</span><span style="color: #800000;">
$type : monster;
p</span>{<span style="color: #ff0000;">
    @if $type == ocean {
        color</span>:<span style="color: #0000ff;"> red</span>;
    }<span style="color: #800000;"> @else if $type == matator</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;"> blue</span>;
    }<span style="color: #800000;"> @else if $type == monster</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;"> green</span>;
    }<span style="color: #800000;"> @else </span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;"> black</span>;
    }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">@for 语法</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
@for指令重复输出一组样式。对于每次重复，计数器变量用于
调整输出结果。该指令有两种形式：@for $var from <start> 
through <end> 和 @for $var from <start> to <end>。注意
关键字through 和 to的区别。$var可以是任何变量名，比如$i;
<start> 和 <end>是应该返回整数的SassScript表达式。当
<start>比<end>大的时候，计数器将递减，而不是增量。

@for语句将设置$var为指定的范围内每个连续的数值，并且每
一次输出的嵌套样式中使用$var的值。对于from ... through
的形式，范围包括<start>和<end>的值，但from ... to的形式
从<start>开始运行，但不包括<end>的值。
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@for $i from 1 through 3 </span>{<span style="color: #ff0000;">
      .item-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em * $i</span>; }<span style="color: #800000;">
}
@for $i from 5 to 3 </span>{<span style="color: #ff0000;">
      .item-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em * $i</span>; }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">@each
@each指令通常格式是@each $var in <list or map>。$var可以
是任何变量名，像$length 或者 $name，和<list or map>是一
个返回列表（list）或 map 的 SassScript 表达式。

@each 规则将$var设置为列表（list）或 map 中的每个项目，
输出样式中包含使用$var的值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@each $animal in puma, sea-slug, egret, salamander </span>{<span style="color: #ff0000;">
      .#{$animal</span>}<span style="color: #800000;">-icon </span>{<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> url('/images/#{$animal</span>}<span style="color: #800000;">.png');
  }
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">多重赋值</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) </span>{<span style="color: #ff0000;">
      .#{$animal</span>}<span style="color: #800000;">-icon </span>{<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> url('/images/#{$animal</span>}<span style="color: #800000;">.png');
        border: 2px solid $color;
        cursor: $cursor;
  }
}
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) </span>{<span style="color: #ff0000;">
  #{$header</span>} {<span style="color: #ff0000;">
        font-size</span>:<span style="color: #0000ff;"> $size</span>;
  }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
@while 指令重复输出嵌套样式，直到SassScript表达式返回结果
为false。这可用于实现比@for语句更复杂的循环
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
$i: 6;
  @while $i > 0 </span>{<span style="color: #ff0000;">
  .item-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em * $i</span>; }<span style="color: #800000;">
      $i: $i - 2;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
*
*混入指令
*
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
混入(mixin)允许定义可以在整个样式表中重复使用的样式，
而避免了使用无语意的类（class），比如 .float-left。
混入(mixin)还可以包含所有的CSS规则，以及任何其他在Sass
文档中被允许使用的东西。他们甚至可以带arguments，引入变
量，只需少量的混入(mixin)代码就能输出多样化的样式。
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">1、定义一个混入(mixin):@mixin</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin large-text </span>{<span style="color: #ff0000;">
  font</span>:<span style="color: #0000ff;"> {
    family: Arial</span>;<span style="color: #ff0000;">
    size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    weight</span>:<span style="color: #0000ff;"> bold</span>;
  }<span style="color: #800000;">
  color: #ff0000;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">2、引入混合样式：@include</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.page-title </span>{<span style="color: #ff0000;">
  @include large-text;
  padding</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
混入（mixin）也可以包含在任何规则的外（即，在文档的根）,
只要它们不直接定义的任何属性或使用任何父选择器引用
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin silly-links </span>{<span style="color: #ff0000;">
  a {
    color</span>:<span style="color: #0000ff;"> blue</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;
  }<span style="color: #800000;">
}
@include silly-links;
</span><span style="color: #008000;">/*</span><span style="color: #008000;">带参数</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin sexy-border($color, $width: 1in) </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> {
    color: $color</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> $width</span>;<span style="color: #ff0000;">
    style</span>:<span style="color: #0000ff;"> dashed</span>;
  }<span style="color: #800000;">
}
p </span>{<span style="color: #ff0000;"> @include sexy-border(blue); </span>}<span style="color: #800000;">
h1 </span>{<span style="color: #ff0000;"> @include sexy-border(blue, 2in); </span>}

다음은 버튼 스타일을 만드는 예입니다. 

<span style="color: #800000;">.button-narmol</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #FFFFFF</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">
    -webkit-tap-highlight-color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0)</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;">pointer</span>;<span style="color: #ff0000;">
    &</span>:<span style="color: #0000ff;">after{
        content: " "</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> 200%</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 200%</span>;<span style="color: #ff0000;">
        position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
        top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.2)</span>;<span style="color: #ff0000;">
        -webkit-transform</span>:<span style="color: #0000ff;"> scale(0.5)</span>;<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> scale(0.5)</span>;<span style="color: #ff0000;">
        -webkit-transform-origin</span>:<span style="color: #0000ff;"> 0 0</span>;<span style="color: #ff0000;">
        transform-origin</span>:<span style="color: #0000ff;"> 0 0</span>;<span style="color: #ff0000;">
        box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
        border-radius</span>:<span style="color: #0000ff;"> 10px</span>;
    }<span style="color: #800000;">
}
@mixin button-style-block($select,$color,$darken)</span>{<span style="color: #ff0000;">
    #{$select</span>}{<span style="color: #ff0000;">
        display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
        padding-left</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
        padding-right</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
        font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
        line-height</span>:<span style="color: #0000ff;"> 2.55555556</span>;<span style="color: #ff0000;">
        background-color</span>:<span style="color: #0000ff;"> darken($color,$darken)</span>;<span style="color: #ff0000;">
        @extend .button-narmol;
        &</span>:<span style="color: #0000ff;">active{
            background-color: darken($color,$darken+10%)</span>;
        }<span style="color: #800000;">
    }
}
@mixin button-style-inline-block($select,$color,$darken)</span>{<span style="color: #ff0000;">
    #{$select</span>}{<span style="color: #ff0000;">
        background-color</span>:<span style="color: #0000ff;"> darken($color,$darken)</span>;<span style="color: #ff0000;">
        display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
        padding</span>:<span style="color: #0000ff;"> 0 1.32em</span>;<span style="color: #ff0000;">
        line-height</span>:<span style="color: #0000ff;"> 2.3</span>;<span style="color: #ff0000;">
        font-size</span>:<span style="color: #0000ff;"> 13px</span>;<span style="color: #ff0000;">
        @extend .button-narmol;
        &</span>:<span style="color: #0000ff;">active{
            background-color: darken($color,$darken+10%)</span>;
        }<span style="color: #800000;">
    }
}
@include button-style-block(".krui-btn_primary",#1AAD19,10%);
@include button-style-block(".krui-btn_error",#E64340,0%);
@include button-style-inline-block(".krui-btn_primary-small",#1AAD19,0%);</span>

그냥 html로 불러보세요. 

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>button<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="css/button.css"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        span</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_error"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> 

이 기사는 작업 중에 몰래 작성하는데 많은 시간을 할애했습니다. 또한 모든 분들께 도움이 되기를 바랍니다. 또한, 재인쇄 시 원본을 표시해 주시기 바랍니다. -------나는 물고기다 《 》

sass 중국어 문서: http://www.css88.com/doc/sass/

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：css text-fill-color与text-stroke讲解다음 기사：谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

관련 기사

더보기