Introduction to sass basic syntax and sass basic syntax
Note: It is mainly used for record
Preface:
Sass is a type of css pre-compilation tool. It can be used in combination with compass to greatly speed up css development. It can also solve some unpleasant issues in css development. Sass can make css development more
Sass is a preprocessor language for CSS, similar languages are less,stylus and so on.
So what is a CSS preprocessor?
CSS preprocessor defines a new language, the basic idea is, with a special programming language, for the CSS to add some programming features, CSS as a target to generate files, and then developers just use this language to encode work.
In other words, the CSS preprocessor is a specialized language that is written in this langu
Sass usage, sass Usage Guide
At the beginning, we may be used to html + css when learning the front-end. But we found that css has a lot of repeated code or you have to change the image or text in it, and it is very troublesome to look for it, so we will use sass to simplify it.
First, we need to install a koala software. It is used to compile the asaa code to ge
Since the discovery of programmable css syntax Sass and Sass-based css library compass
I feel like c # And I feel like. NET Framework. Everything is designed to improve development efficiency and reduce the threshold for developing large web applications.
When web development trends move towards the web API + Js era, Will compass and Sass become the standard fo
your needs. If you're just a normal need, you don't have to do this, koala yourself can help.
While the koala and compass frameworks are relatively slightly experienced, I believe the later versions will definitely improve.
Summary
This article mainly through the creation of a SASS project as an example, to lead you to use koala such a graphical interface compiler tool to your SASS project,
: black;
.scoped {
$ color: white;
color: $ color;
}
.unscoped {
// LESS = black (still the value black defined at the beginning)
// SASS = white (rewritten as white)
color: $ color;
}
Winner: Less
Media inquiry
The way we started using media queries was to add media code blocks for media queries at the bottom of the main style sheet. This is useful, but it will cause the responsive style to be disconnected from the original style. CSS code:
.s
Sass BASICS (I), sass Basics
Css is a combination of some very simple statements. Since simple statements, there are inevitably many repetitive and redundant items, and there is no traditionalProgramming Language variables, control statements and other advanced features, so css writing is inefficient, often need to find replacement, a large number of copies to modify or write.
Article Introduction: because SASS relies on the ruby environment, make sure Ruby is installed before installing SASS. The pilot website downloads a ruby.
Ruby InstallationBecause SASS relies on the ruby environment, make sure Ruby is installed before installing SASS. Download a ruby from the pilot websiteW
SASS component development, sass componentSASS component development
The SASS pre-processor increases the programming capability not available for css, improves the efficiency of front-end development, and extends the css writing skills.Component development
Design a form prompt layer (including successful success, warning, error, and other status errors) compone
Css compilation tool Sass hybrid macro, inheritance, placeholder when to use, compilation tool sass
// Use the @ mixin mt ($ var) {margin-top: $ var ;}. block {@ include mt (5px); span {display: block; @ include mt (5px );}}. header {color: orange; @ include mt (5px); span {display: block; @ include mt (5px );}}
1. The above is the sass Code Compiled by the
Sass function-color function-RGB color function, sass-rgb
RGB color function-RGB () color Function
Mainly dividedRGB,HSLAndOpacityThree major functions, of course, include some other color functions, such as adjust-color and change-color.1. RGB color FunctionRGB color is only an expression in the color. R indicates red, G indicates green, and B Indicates blue. Provides six functions for RGB colors in
The color function in sass is mainly divided into three functions: RGB, HSL and opacity. RGB color Function [] RGB (red, red, green, $blue) converts RGB colors to hexadecimal colors [] rgba (color, color, alpha) converts hexadecimal colors and opacity values to RGBA colors [] Red ($color): from a 16 The color of the system gets one of the red [] Green ($color): From a hexadecimal color to get one of the green Red [] Blue ($color): Get the Blue [] mix
SASS, sass tutorial
File suffixSass has two types of suffix files: sass and sass.And Semicolon. The other is the scss file we use here.The css file format is similar. Braces and semicolons are used. In this tutorialAll sass files mentioned above refer to files suffixed with scss. We recommend that youUse a file with th
Sass primary syntax, sass
The sass syntax used is:
Sass -- watch test. scss: test.css -- style compact -- style expanded
For example:
1. Custom Variables
The content of test. scss is:
$color: black;.test1 { background-color: $color;}
Compiled into test.css:
.test1 { background-color: black;}
2. Add a variable t
Sass common usage notes and sass usage notes
Sass is required for h5 projects recently developed by the company. Therefore, the leaders recommended me to go to the SASS Usage Guide blog of the great god of Ruan Yifeng to learn how to use sass for future convenience, so we sh
Sass advanced syntax and sass syntax
Github address: https://github.com/lily1010/sass/tree/master/course03
The sass syntax used is:
Sass -- watch test. scss: test.css -- style expanded
For example:
1. Import external files. The default file suffix is
Sort out some sass usage experiences in my work, and sort out my sass experiences.
About the basic usage of Sass Baidu search a big push I am From Ruan Yifeng great god notes began to contact this thing transport door http://www.ruanyifeng.com/blog/2012/06/sass.html
When I came to Ctrip, I started from writing css to replace the girl who made the style before. To
-case () function, which converts a string To a lowercase letter.
// SCSS
. Test {
Text: to-lower-cass (AAAAA );
Text: to-lower-case (aA-aAAA-aaa)
}
Compiled css code;
// Css
. Test {
Text: aaaaa;
Text: aa-aaaa-aaa;
}
Introduction to digital functions
The array functions in Sass provide a series of functions fo
Sass: first recognized the use of Sass and Koala tools, sasskoala
1. Download and install Koala (find the appropriate System Version)
Second, first create a CSS folder, and create a new file (.txt) in it, and name it demo. scss
3. Open Koala and drag in the css folder. You can modify the output mode.
[Extension] SASS provides four compilation style option
First, download Koala(Find the appropriate system version) and install Second, create a new CSS folder and create a new text document (. txt) init and name it demo.scss Third, open the koala, the CSS folder dragged in, you can modify the output mode The extensions Sass provides four compile-style options :
Nested: Nested indentation of the CSS code, which is the default value.
Expanded: No indented, extended CSS code.
Compact:
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.