CSS development tool that is easy to write and read--SASS_html/css_WEB-ITnose

Recently I came into contact with a CSS preprocessor?? SASS, and deployed it in a new project

I am very satisfied with the experience so far, and achieved the expected effect. Personal feeling It is richer, better and more cost-effective than the LESS language we have used before

SASS simplifies our CSS workflow, making it easier to design styles and easier to read and maintain daily.

CSS itself is a cascading style sheet and is not considered a programming language. In order to enrich its programming elements, a CSS preprocessor has emerged specifically for CSS. To a certain extent, it can also be understood as Programming languages ​​

And SASS is one of them. It provides diverse usages such as variables, inheritance, statements, etc., and you can write CSS like a programming language

Installation of SASS With use

Installation

You need to install Ruby first, and then you can install SASS

The author doesn’t know what Ruby is and doesn’t care. He only knows that SASS is developed by Ruby. Write SASS does not require knowledge of Ruby, but if you want to install SASS, you must first install Ruby

Download a Ruby version online that suits your development environment, and run the command line after installation

gem -vruby -v

Return the version number after successful operation

You could have installed SASS directly

gem install sass

Because it was blocked, it probably wouldn’t succeed, so I had to take a roundabout way. Go to Taobao RubyGems mirror to install SASS

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l

The operation is successful and finally the source pointing path is returned. Note that the source pointing path must be unique

Install again SASS

gem install sass

Upgrade SASS

gem update sass

Use

to run the command line directly Looking at the compiled CSS code, this has no practical effect

sass init.sass

Compile and convert SASS files into CSS files

sass init.scss init.css

We have SASS as a development file, so we usually choose compression directly when compiling CSS files

sass --style compressed init.sass init.css

SASS provides four compilation styles, and you can experience them one by one in private

nested：嵌套并且缩进，默认值expanded：嵌套但不缩进compact：简洁格式compressed：压缩

Monitor SASS files and automatically compile and convert them into CSS files when changes occur

sass --watch init.scss:init.css --style compressed

During the compilation process, if there are grammatical errors, the compilation will fail. , both the command line and CSS files will provide specific error messages

Install WebStorm editor

Sublime and Dreamweaver are both weak, so you need to download and install a WebStorm editor to work with SASS Have fun

International practice, show off the WebStorm editor

Please note that UTF8 encoding is declared at the beginning of the file, otherwise if there is Chinese in the comments, an error will be reported when compiling

@charset "utf-8"

SASS syntax

Basic usage

Variables

$cl: #333body	color: $cl

Calculation

$sz: 14px$ln: $sz * 1.5

Nesting (three nesting methods of selector, attribute and pseudo-class)

.index	border: 1px solid #ccc		top: 3px solid #999		radius: 5px	a		color: #666		&:hover,&.active			#333

Comments

/* 首页 *///导航条

Code Reuse

Inheritance

html	height: 100%.index	@extend html

Mixing

@mixin txt ()	overflow: hidden	white-space: nowrap	text-overflow: ellipsis@mixin rads ($v: 2px)	-webkit-border-radius: $v	-moz-border-radius: $v	border-radius: $v.index	width: 200px	@include txt	@include rads(50%)

File Reference

@import '../base/set'

Advanced Statement

Conditional

$cl: #333.index	@if lightness($cl) > 30%		color: #666	@else		color: #999

Loop statement

@for $i from 1 to 10	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat$i: 0@while $i < 10	$i: $i + 1	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat$arr: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)@each $i in $arr	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat

Custom function

@function large ($v)	@return $v * 1.5.index	font-size: large(14px)