This article mainly answers the following questions , For beginners of front-end developers .

1、 What is? Sass and Less?

2、 Why use CSS The preprocessor ?

3、Sass and Less Comparison

4、 Why choose to use Sass instead of Less?


What is? Sass and Less?

      Sass and Less All belong to CSS The preprocessor , What is CSS What about the preprocessor ?

       CSS Preprocessor defines a new language , The basic idea is this , In a special programming language , by CSS Added some programming features , take CSS Generate files as targets , Then developers just use this language to do CSS Coding of .

        In plain English, it means “ In a special programming language , Conduct Web Page style design , And then through the compiler to normal CSS file , For project use ”.


Why use CSS The preprocessor ?

As a front-end developer , Everybody knows ,Js You can customize variables in , and CSS Just a markup language , Not a programming language , So you can't customize variables , Can't quote, etc .

 CSS There are several specific shortcomings :

  • Grammar is not strong enough , For example, you can't nest writing , As a result, many repetitive selectors need to be written in modular development ;
  • There is no variable and reasonable style reuse mechanism , So that the logically related attribute values must be repeated in the form of literal quantity , Makes it difficult to maintain .

As a result, we have increased a lot of workload in our work for no reason . While using CSS The preprocessor , Provide CSS Missing style layer reuse mechanism 、 Reduce redundant code , Improve the maintainability of style code . Greatly improved our development efficiency .

however ,CSS Preprocessor is not a panacea ,CSS The good thing about it is that it's easy 、 Be used and debugged anytime, anywhere . precompile CSS The addition of steps , Let's add a link to the development workflow , Debugging has also become more cumbersome . The bigger problem is , Precompiling can easily lead to the abuse of future generations .

So when we measure a precompiled solution in a real project , Think about it , Compared to the additional maintenance costs ,CSS Does the preprocessor solve the bigger problem .


Sass and Less Comparison

The difference

1、Less Environment Sass Simple
Cass You need to install Ruby Environmental Science ,Less be based on JavaScript, It is necessary to introduce Less.js To handle code output css Go to browser , It can also be used in the development phase Less, And compile it into css file , Put it directly in the project , Yes less.app、SimpleLess、CodeKit.app Such a tool , There are also online editing addresses .

2、Less Use the Sass Simple
LESS There's no tailoring CSS The original characteristics , But in the present CSS On the basis of grammar , by CSS Add features of procedural languages . As long as you understand CSS The foundation can be very easy to use .

3、 Starting from function ,Sass a Less Slightly stronger

①sass There are variables and scopes .
- $variable,like php;
- #{$variable}like ruby;
- Variables can be global or local , And there are priorities .

②sass There is the concept of function ;
- @function and @return And function parameters ( There are also indefinite parameters ) It can make you look like js Develop the logic that encapsulates what you want .
-@mixin similar function But there's a lack of things like function Programming logic , It's more about improving css Reusability and modularity of code segments , This is also the most used one .
-ruby Provides very rich built-in native api.

③ Process control :
- Conditions :@if @else;
- Loop traversal :@for @each @while
- Inherit :@extend
- quote :@import

④ data structure :
-$list type = Array ;
-$map type =object;
The rest have string、number、function Other types

4、Less And Sass The processing mechanism is different
The former is handled by the client , The latter is handled by the server , In contrast, the former will be a little slower than the latter
 
5、 About variables in Less and Sass The only difference is Less use @,Sass use $.
 
  Similarities

Less and Sass There are some similarities in grammar , Like the following :

1、 Mix in (Mixins)——class Medium class;
2、 Parameters are mixed in —— Can pass parameters class, It's like a function ;
3、 nested rules ——Class Nested in class, To reduce duplicate code ;
4、 operation ——CSS Use math in English ;
5、 Color function —— You can edit colors ;
6、 Namespace (namespace)—— Grouping styles , So that it can be called ;
7、 Scope —— Modify the style locally ;
8、JavaScript assignment —— stay CSS Use in JavaScript Expression assignment .


  Why choose to use Sass instead of Less?
 
1、Sass There are some mature frameworks on the market , for instance Compass, And there are many frameworks in use Sass, for instance Foundation.
2、 In terms of the heat of discussion abroad ,Sass Absolutely superior to LESS.
3、 As far as the tutorial is concerned ,Sass It's better than LESS. At home LESS The concentrated tutorial is LESS Chinese official website , and Sass Chinese course of , Gradually, it is more common in China .
4、Sass It's also mature CSS One of the preprocessors , And there's a stability , A strong team is maintaining .
5、 As well as Scss Yes sass The grammar has been improved ,Sass 3 It becomes Scss(sassy css). Compatible with the original syntax , Just use {} Instead of indenting .
6、bootstrap(Web frame ) The latest version 4, What you use is Sass.
 

Now that we have a basic understanding of these conceptual things , that , Next time, let's talk about Sass Well ~

1、Sass Installation and use

2、Sass The basic usage of

3、Sass Code reuse of

 

Why choose to use Sass instead of Less? More articles about

  1. Why choose to use Dropbox Not other brand synchronization tools ( Don't add extra features , Be extreme and focused )

    author : Wu Feng Links :http://www.zhihu.com/question/19646859/answer/14707821 source : It's up to the author to own the copyright , Please contact the author for permission to reprint . I think the landlord's problem , accuracy ...

  2. Why choose centos, instead of Dibian、Ubuntu【 turn 】

    We run some of the world's largest Internet operations , Therefore, we attach great importance to reliability and stability , It's our first priority . So , We only use Linux To support the customer's system . however , Which one should we use Linux Distribution version ? The answer is ,CentOS. ...

  3. iOS Why do you choose release, instead of debug

    One .Debug and Release Version difference ? as everyone knows , We carry out iOS Development , stay Xcode When debugging a program , There are two ways ,Debug and Release, stay Target Of Setting I believe you should see that many options are divided into ...

  4. Sass and less What's the difference ? Which one is better

    What is? Sass and Less?       Sass and Less All belong to CSS The preprocessor , What is CSS What about the preprocessor ?        CSS Preprocessor defines a new language , The basic idea is this , In a special programming language , by ...

  5. Sass and Less The difference between ?

    This article mainly answers the following questions , For beginners of front-end developers . 1. What is? Sass and Less? 2. Why use CSS The preprocessor ? 3.Sass and Less Comparison 4. Why choose to use Sass instead of Less? what ...

  6. About sass、scss、less Summary of conceptual knowledge of

    This article mainly answers the following questions , For beginners of front-end developers . 1. What is? Sass and Less? 2. Why use CSS The preprocessor ? 3.Sass and Less Comparison 4. Why choose to use Sass instead of Less? what ...

  7. 2017 In the spring Front end automation ( Two ) Page auto refresh 、sass And css The use of transformation 、pxToRem Intuitive transformation

    2017 In the spring   Front end automation ( Two )    Page auto refresh .sass And css The use of transformation .pxToRem Intuitive transformation introduction :   This article will demonstrate : The browser page automatically refreshes : Mobile px And rem Transformation , Simple and intuitive : Use sass Automatic generation ...

  8. Why use Stylus

    CSS The emergence of preprocessor greatly improves the efficiency and efficiency of front-end development , It makes CSS Programmable .LESS and Sass/SCSS Two of the most common preprocessors , With a large user base , A huge number of third-party libraries . However , There's another kind of preprocessor that doesn't cause problems ...

  9. Welcome to daxnet My new blog : One is based on Microsoft Azure、ASP.NET Core and Docker The blog system

    2008 year 11 month , I opened a personal account in the blog park , And published his first blog in the blog Garden . Of course , I'm not blogging from 2008 It started in , Earlier on , Also in the CSDN System Analysts Association ( And then it's called " Hisai.com " ...

Random recommendation

  1. windows php Thread safety and insecurity , I can't understand both versions , Write it down .

    Windows Under the PHP There are two versions : Thread safe version and non thread safe version . On the difference between the two , It's troublesome to elaborate , From the user's point of view , Remember when to use which version of the difference is OK : 1.windows + IIS + ...

  2. HDU 1796 Howmany integers can you find ( Principle of tolerance and exclusion )

    How many integers can you find Time Limit: 12000/5000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  3. Android gossip --ListView And BaseAdapter Use

    In other words, development uses all kinds of Adapter After that, the most comfortable thing to use is BaseAdapter, Although it's a bit more cumbersome to use than other adapters , But you can use it to achieve a lot of your favorite list layout , such as ListView.GridView.Gal ...

  4. <Win32_16> Let's take a look at the standard menu and right-click menu

    In daily application , There are two main kinds of menus :(1) Standard menu ( The menu at the application menu bar )    (2) Right click the shortcut menu Almost all the software you've seen or used , There are both of them The basic steps to add them to your application : (1) Use code or IDE ...

  5. string turn int,int turn string

    string str="12345"; int b=atoi(str.c_str()); Can cooperate with atof, To double char buf[10]; sprintf(buf,  ...

  6. Mysql Database files 、 surface 、 Add, delete, modify and check the records

    One . Database folder operation create database db1 charset utf8; increase db1 Folder show databases ; View all databases show create databas ...

  7. jQuery Click the button to achieve div The hide and show switching effect of

    <script type="text/javascript"> $(function(){ $('#click_event').click(function(){  i ...

  8. 51Nod 1284 2 3 5 7 Multiple Principle of tolerance and exclusion

    1284 2 3 5 7 Multiple benchmark time limit for :1 second Space restriction :131072 KB The score is : 5 difficulty :1 Level algorithm problem Collection Attention gives a number N, seek 1 to N in , How many numbers are not 2 3 5 7 Multiple . for example N = 1 ...

  9. python The whole development of the stack -hashlib modular ( Data encryption )、suprocess modular 、xml modular

    One .hashlib modular 1. What do you mean hash:hash It's an algorithm (3.x Li instead of md5 Module and sha modular , Mainly provide SHA1, SHA224, SHA256, SHA384, SHA512 ,MD5 Algorithm ...

  10. Baby bus - Automation team - Zongshi Technology -Wiger- Original sharing -QQ:18630195

    For software customization, please contact QQ: Update original technology blog , And learning experience ...... For software customization, please contact QQ: