Sass

1. Sass 는 CSS 에 대한 확장 으로 CSS 음성 을 더욱 강하 고 우아 하 게 합 니 다.변 수 를 사용 할 수 있 습 니 다. 내장 규칙, mixins, 여러 기능 을 가 져 오고 css 문법 을 완전히 호 환 할 수 있 습 니 다.CSS 개발 을 간단 하고 유지 할 수 있 게 합 니 다.
2. Sass 를 사용 하려 면 Ruby 환경 을 구축 해 야 합 니 다. 다운로드 주소:http://www.ruby-lang.org/zh_cn / downloads / 메모: PATH 에 루비 실행 파일 추가 를 선택 하 십시오.ruby - v: cmd 에서 설치 성공 여 부 를 테스트 하고 버 전 명령 을 테스트 합 니 다.
3. 명령 행 에 아래 명령 을 입력 하 십시오: (1). gem install sas (2). sas - v (3). gem update sas / / 업그레이드 sas
4. Sass 문법 (1) Sass 는 두 가지 문법 이 있 습 니 다.SCSS (Sassy CSS) 는 CSS 3 문법 확장 버 전 입 니 다. 이 언어 문법 스타일 시트 파일 은 'scss 확장자' 가 필요 합 니 다.줄 임 말 문법 (또는 'Sass' 라 고 함) 은 더욱 간결 한 CSS 쓰기 방식 을 제공 합 니 다.이것 은 괄호 를 사용 하지 않 고 줄 임 말로 선택 문자 의 끼 워 넣 은 등급 을 표현 하 며, 분 호 를 사용 하지 않 고 줄 바 꿈 문자 로 속성 을 구분한다.SCSS 보다 읽 기 쉽 고 쓰기 도 빠르다 는 의견 이 많다.이 문법 을 사용 하 는 스타일 시트 파일 은. sas 를 확장자 로 해 야 합 니 다.
5. sass 명령 sass cs • sass test. scss • sass test. scss test. cs
6. sass 명령 네 가지 컴 파일 스타일 • nested: 들 여 쓰 는 css 코드 입 니 다. 기본 값 입 니 다.expanded: 들 여 쓰기, 확장 css 코드 가 없습니다.compact: 간결 한 형식의 css 코드.copressed: 압축 된 css 코드 입 니 다.sass –style compressed test.sass test.css
7. sas 명령  자동 감시 컴 파일 • watch a file sas – watch input. scss: output. css • watch a directory sas – watch app / ass: public / stylesheets
8. sas - convert: sas - convert 명령 행 도구, 하나의 문법 을 다른 문법 으로 변환 할 수 있 습 니 다.
9. 변수 변 수 는 $로 시작 합 니 다. 변수 가 선택 기와 속성 명 등 문자열 에 장 착 되 어야 한다 면 플러그 인 기호 \ # {} 에 써 야 합 니 다.

$blue:#1875e7;
div {
color:$blue;
}
$side:left;
.rounded{
    border-#{$side}-radius:5px;
}

10. 기본 변수 기본 변 수 는 기본 값 을 설정 하 는 데 사 용 됩 니 다.

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

11. 연산 SASS 는 수치 형의 Value (예 를 들 어 숫자, 색상, 변수 등) 에 대해 가감 곱 하기 사 칙 연산 을 한다.연산 자 앞 뒤 에 빈 칸 을 남 겨 두 세 요. 그렇지 않 으 면 오류 가 발생 할 수 있 습 니 다.

$var:2;
body {
margin:(14px/2);
top:50px+ 100px;
right:$var*10%;
}

12. 끼 워 넣 기 는 선택 기와 속성 을 허용 합 니 다. (뒤에 콜론 을 추가 해 야 합 니 다) 끼 워 넣 은 코드 블록 에 끼 워 넣 으 면 부모 요 소 를 사용 & 참조 할 수 있 습 니 다.

div {
h1 {
color:red;
    }
  }
p {//     
border:{
color:red;
}
}
a {
&:hover{
color:#ffb3ff;
}
}

13. 주석 두 가지 주석 스타일 • 표준 CSS 주석 / comment / 는 컴 파일 된 파일 에 보 존 됩 니 다.한 줄 주석 / / comment, SASS 원본 파일 에 만 저장 하고 컴 파일 후 생략 됩 니 다.comment /, "중요 주석" 을 표시 합 니 다. 압축 할 때 주석 을 보류 하고 저작권 을 설명 하 는 데 사 용 됩 니 다. 중국어 주석 • 파일 첫 줄 에 @ charset "utf - 8" 을 추가 합 니 다.
14. 계승 @ extend 는 선택 기 를 허용 하고 다른 선택 기 를 계승 합 니 다.

.class1{
border:1pxsolid#ddd;
}
.class2{
@extend.class1;
font-size:120%;
}

15. Mixin 혼합 은 다른 코드 블록 을 참조 할 수 있 고 다시 사용 할 수 있 는 코드 블록

@mixin left {
float:left;
margin-left:10px;
}
div {
@includeleft;
}

16. Mixin 혼합 은 함 수 를 사용 하 는 것 처럼 매개 변 수 를 가지 고 호출 할 수 있다.

@mixin left($value:10px){
float:left;
margin-right:$value;
}
div {
@includeleft;
}
mydiv{
@include left(20px);
}

17. 파일 가 져 오기 @ import 명령 으로 외부 파일 을 삽입 합 니 다.컴 파일 할 때 @ import 의 scss 파일 을 합 쳐 하나의 CSS 파일 만 생 성 합 니 다. @ import 일반 CSS 파일 은 컴 파일 된 파일 에 합 쳐 지지 않 습 니 다. @ import "path / filename. scss"; @import “foo.css”;
18. 조건문 @ if, @ else 는 판단 할 수 있 습 니 다.

$color:#f00;
p {
@if 1+ 1== 2{ border:1pxsolid; }
@if5< 3{ border:2pxdotted; }
@iflightness($color)> 30%{
background-color:#000;
}
@else{
background-color:#fff;
}
}

19. 조건문 은 세 가지 판단 을 지원 한다.

if($condition, $if_true, $if_false) 。
($condition, $if_true, $if_false) 。
if(true, 1px, 2px)
if(false, 1px, 2px)

20 순환 문 구 는 @ for, @ while, @ each 순환 을 지원 합 니 다: @

for $i from 1 to 10 {
.border-#{$i}{
border:#{$i}pxsolidblue;
}
}
$i:6;
@while $i > 0 {.item-#{$i}{
width:2em*$i;
}
$i:$i-2;
}
@each $member in a, b, c, d {
.#{$member}{
background-image:url("/image/#{$member}.jpg");
}
}

21. 사용자 정의 함수 @ function 자신의 함수 작성

@function double($n) {
@return$n*2;
}
#sidebar{width:double(5px);
}

22. grunt - contrib - ass 설치 Grunt Sass 플러그 인 npm initnpm install grunt - contrib - ass – save - dev grunt. loadNpmTasks ('grunt - contrib - ass');
23.Example config

module.exports = function(grunt) {
grunt.initConfig({
sass: { // Task 
dist: { // Target 
options: { // Target options 
style: 'compressed' 
// nested, expanded, compact, compressed
},
files: { // Dictionary of files 
'dist/main.css': 'src/test.scss' // 'destination': 'source' 
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ['sass']);
};

24.Compile files in a directory grunt.initConfig({ sass: { // Task dist: { // Target options: { // Target options style: ‘compressed’ // nested, expanded, compact, compressed }, files: [{expand: true,cwd: ‘src/styles’,src: [‘*.scss’],dest: ‘dist’,ext: ‘.css’}] } } });