New less and sass competitions, new lesssass

New less and sass competitions, new lesssass

 

I recently came into contact with Bootstrap and involved LESS. The most widely used CSS preprocessors are LESS and Sass. They all strive to arm CSS into a development language, transition from a simple descriptive language to a language with procedural characteristics. The main features are:Variables, Mixins, nesting, and inheritance. As mentioned in the Tutorial: the pre-processor of CSS is to change CSS from a designer tool to a developer tool. However, after reading this article, I think that as a front-end student who has not thoroughly studied CSS, I 'd better not climb high. Besides, in my current project, I feel like using LESS to write CSS is a bit cool. But in retrospect, the technology is not overwhelmed... Bulabulabula ~~ Let's take a look at the topic and answer a very good dry article to share with you the difference between the basic features of LESS and Sass.

It turns out that LESS -- and Sass -- functions are much more than that. LESS and Sass have some similarities in syntax, such as the following:

● Mixins)-- Class in class;

●Parameter Mixing-- Class that can pass parameters, just like a function;

●Nested rules-- Nested Class in class to reduce repeated code;

●Operation-- Mathematics is used in CSS;

●Color Function-- You can edit the color;

●Namespace)-- Group style, which can be called;

●Scope-- Modify the style locally;

●JavaScript assignment-- Use a JavaScript expression to assign values in CSS.

The main difference between LESS and Sass is their implementation method. LESSS is based on JavaScript, so it is processed on the client.

On the other hand, Sass is Ruby-based and then processed on the server. Many developers do not choose LESS because the JavaScript engine requires additional time to process code and then output modified CSS to the browser. There are many ways to do this. I chose to use LESS in the development process. Once the development is complete, I copy and paste the LESS output to a compressed file, and then to a separate CSS file to replace the LESS file. Another option is to use koala to compile and compress your LESS files. Both options minimize your style output to avoid any problems that may arise because your browser does not support JavaScript.

LESS Is More

Introduction

Introducing LESS in your project is simple:

1. Download less. js;

2. Create a file to put your style, suchStyle. less;

3. Add the following code to your HTML

<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>

Note the rel attribute of link. You need to use/less at the end of the attribute value to make LESS work. Then it is necessary to introduce scirpt after link. If you are using HTML5 syntax-why not? -- You can save type = "text/css" and type = "text/javascript ".

Variable

If you are a developer, variables should be your best friend. If you want to reuse a message (color in this example), set it to a variable. In this way, you can ensure your consistency and reduce the complexity of scrolling code to search for color values, copy and paste. You can even add or subtract the HEX value you need to render to these colors. Let's take a look at the example:

 @blue: #00c; @light_blue: @blue + #333; @dark_blue: @blue - #333;

The only difference between variables in LESS and Sass is that LESS uses @ and Sass uses $. There are also some differences in scope, which I will mention later.

Mixin)

Occasionally, we will create some style rules that will be used repeatedly in the style sheet. No one will prevent you from using multiple classes in an HTML element, but you can use LESS to complete it in the style sheet. To describe this, I wrote an example:

.border {    border-top: 1px dotted #333;}article.post {    background: #eee;    .border;}ul.menu {    background: #ccc;    .border;}

In Sass, you need to add the @ mixin declaration before the style rule, specifying that it is a nested. Then, call it through @ include:

@mixin border {    border-top: 1px dotted #333;}article.post {    background: #eee;    @include border;}ul.menu {    background: #ccc;    @include border;}

 Parameter Mixing

Just like having function functions in CSS, these functions are useful for unnecessary work in current CSS work. The best and most useful example is the private prefixes of many browsers that we are experiencing during the transition from CSS2 to CSS3. Nettuts + has a great video and article written by Jeffrey Way, which contains files composed of useful parameters. They cover most of the CSS3 attributes that use private prefixes of various browsers. For example, in their format, a mixin that simply processes rounded corners is as follows:

.border-radius( @radius: 3px ) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}

In this example,. border-radius has a default 3px rounded corner, but you can use any value you need .. Border-radius (10px) generates a rounded corner with a radius of 10px.

The syntax in Sass is similar to LESS. It only uses $ to declare the variable, and then uses the @ mixin and @ include mentioned above to call it.

Selector inheritance

This things LESS is not provided. With this function, you can attach a selector to a pre-defined selector without using commas to separate the two:

. Menu {border: 1px solid # ddd ;}. footer {@ extend. menu;}/* the preceding writing rules have the same effect as the following :*/. menu ,. footer {border: 1px solid # ddd ;}

Nested rules

Nesting classes and IDs in css is the only way to avoid style interference or other style interference. However, this may be messy. Using a selector similar to # site-body. post. post-header h2 is unattractive and occupies a large number of unnecessary spaces. With LESS, you can nest IDs, classes, and labels. For the example mentioned above, you can write as follows:

#site-body { …    .post { …        .post-header { …            h2 { … }            a { …                &:visited { … }                &:hover { … }            }        }    }}

The above code is eventually the same as the above example (that long string of selectors), but it is easier to read and understand, and occupies a small amount of space. You can also reference element styles to their pseudo elements through &. this function is similar to this in JavaScript.

Operation

This may be what you expected: use numbers or variables to perform mathematical operations in your style sheet!

@base_margin: 10px;@double_margin: @base_margin * 2;@full_page: 960px;@half_page: @full_page / 2;@quarter_page: (@full_page / 2) / 2;

Under the Declaration, I also realized that I could divide it by 4 to get the @ quarter_page variable, but here I just want to demonstrate that parentheses form the "Operation Order", which is also usable here. In the abbreviated rule, parentheses are also required, for example, border: (@ width/2) solid #000.

Sass is more professional in numbers than LESS. It can be converted into units. Sass can process unidentifiable measurement units and output them. This feature is clearly an attempt to the future-proving some of the changes made by W3C.

/* Sass */2in + 3cm + 2pc = 3.514in/* LESS */2in + 3cm + 2pc = Error

Color Function

At the beginning of the article, I mentioned how LESS can help me deal with a palette centered around the coding process. The greatest contribution to this is the color function. Add a standard blue color to your style and use the blue color as a gradient button in the form. You can open Photoshop or other editors to obtain a lighter or darker HEX color value than blue for gradient. Or, you can just use the color function in LESS.

@blue: #369;.submit {    padding: 5px 10px;    border: 1px solid @blue;    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue,10%)), color-stop(100%, @blue)); /*Webkit*/    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%);/*Opera*/    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/    color: #fff;    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);}

The lighten function obviously uses the percentage value to reduce the color. In this example, it will reduce the base blue by 10%. This method allows us to change the color values of the elements or any other elements-simply changing the base color. This is very useful for themes (templates. In addition, if you use the parameter function, as mentioned above, you can also simply apply it to some browser private prefix declarations, such :. linear-gradient (lighten (@ blue), @ blue, 100% );.

Well, the final result is indeed very good:

Very nice variable-based "Submit" button

There are also many other color functions, such as darkening or adjusting the color saturation, and you can even rotate the color disk to use its own colors. I suggest you try what you can come up ).

Sass seems to have more options-but I don't need that much. I personally use lighten and darken most often. For more information, see this article.

Conditional statements and Control

This is a really good stuff, and it is also a feature not supported by another LESS. With Sass, you can use the if {} else {} Condition Statement and for {} loop. It even supports and, or, not, and operators such as <,>, <=,> =, and =.

/* Sample Sass "if" statement */@if lightness($color) > 30% {    background-color: #000;} @else {    background-color: #fff;}/* Sample Sass "for" loop */@for $i from 1px to 10px {    .border-#{i} {    border: $i solid blue;    }}

 Namespaces)

Namespace can be used to organize our CSS to another level. We can group some common styles and use them directly when using them. For example, if we create a style group named default, we can call it directly from the group when using it.

#defaults {    .nav_list () {        list-style: none;        margin: 0; padding: 0;    }    .button () { … }    .quote () { … }}

Then, in our code, if we use ul elements in a nav element, we will think that we need the default style. Then we can simply call it and it will be applied directly.

       nav ul {      #defa ults > .nav_list;       }

Scope

Scope is the standard in programming, and LESS is also. If you declare a variable at the root level of your style sheet, it can be used throughout the document. However, if you redefine this variable in a selector, such as id or class, then, it can only be available in this selector-of course, it is the new value after the definition.

@ Color: # 00c;/* Blue */# header {@ color: # c00;/* red */border: 1px solid @ color; /* red border */} # footer {border: 1px solid @ color;/* blue border */}

Because we have redefined the color variable in # header, the value of the variable will be different and will only be valid in this selector. The original value is maintained if it is not redefined in all aspects before or after it.

The scope is slightly different in Sass. In the above Code, when the @ color variable turns red, the value of this variable in the code will be overwritten (red ).

Note

This part is relatively basic. LESS allows two annotation writing methods. Standard CSS comments,/* comment */, are valid and can be output correctly through processing. When a line comment, // comment, can also be used but cannot be output through processing. Then, the result is "silent ".

Import

The import is also quite compliant with the standard. The standard @ import: 'classes. less'; process well. However, if you want to import other LESS files, the file extension is optional, so @ import 'classes '; is also feasible. If you want to import content that does not require LESS processing, you can use. css extension (for example, @ import: 'reset.css ';).

String insertion

A string can also be used in a variable and called by @ {name.

@base_url :  'http://www.qianduan.net' ; background-image :  url ( "@{base_url}/images/background.png" );

Escape (Escaping)

Occasionally, you may need to introduce a value that is invalid in CSS or cannot be recognized by LESS. It is usually the hack of some IE. To avoid throwing exceptions and destroying LESS, you need to avoid them.

. Class {filter :~ "Progid: DXImageTransform. microsoft. alpha (opacity = 20) ";}/* will actually output the following code :*/. class {filter: progid: DXImageTransform. microsoft. alpha (opacity = 20 );}

 JavaScript assignment

This is my favorite part of LESS: using Javascript in the style sheet-pretty exciting. You can use expressions, or refer to the Environment direction to use single quotes.

@ String: ''howdy '. toUpperCase () ';/* @ string to 'Howdy' * // * You can also use the previously mentioned interpolation: */@ string: 'Howdy '; @ var :~ ''' @ {String} '. topUpperCase ()';/* changes to 'Howdy '* // * obtains the document information */@ height = 'document. body. clientHeight ';

 Output Format

However, LESS has no output settings, while Sass provides 4 output options: nested, compact, compressed, and expanded.

Conclusion

These two methods have many in common. For code-writing designers, they are both cool tools that can help developers work more efficiently and quickly. If you are a fan of koala or HTML, Sass will be your good assistant. For me, a PHP and JavaScript geeks, I prefer LESS because it facilitates the introduction and use of JavaScript expressions and document attributes. I suspect that I am close to the possibility of actually understanding programming in the style sheet, but I still insist on trying. If you use one or both of them at work, I 'd like to hear more about it and see your results. Of course, skills, tips, and corrections are always welcome.