{"id":394,"date":"2017-08-17T05:32:23","date_gmt":"2017-08-17T05:32:23","guid":{"rendered":"http:\/\/mansainfotech.com\/blog\/?p=394"},"modified":"2017-08-17T05:32:23","modified_gmt":"2017-08-17T05:32:23","slug":"what-are-css-preprocessors","status":"publish","type":"post","link":"https:\/\/mansainfotech.com\/blog\/what-are-css-preprocessors\/","title":{"rendered":"What are CSS Preprocessors?"},"content":{"rendered":"

Having prior mastery over CSS, it probably becomes easy to use its preprocessors, namely \u2013 Sass, Less & Stylus. <\/span><\/span><\/p>\n

Let\u2019s segregrate our learning of CSS Preprocessors into the following:<\/span><\/span><\/p>\n

** CSS<\/span><\/span><\/p>\n

** Preprocessors<\/span><\/span><\/p>\n

** CSS Preprocessors<\/span><\/span><\/p>\n

** Sass<\/span><\/span><\/p>\n

** Less<\/span><\/span><\/p>\n

What is Css? <\/i><\/span>Refering to Cascading style sheets, describes how Html elements should be displayed on all screen devices. <\/span><\/span><\/p>\n

All in all, Css describes layouts, positioning, width, height and alignment of webpages. It saves lot of work with its ability to write once and run anywhere. For more on Css, check out my previous post – <\/span><\/span><\/p>\n

What is Preprocessor? <\/i><\/span>It is a kind of program which takes one type of data and converts down it to another type of data. For instance, Haml is processed into Html and Sass is processed into Css. <\/span><\/span><\/p>\n

Now, let\u2019s get down to What are Css preprocessors? <\/i><\/span>It is a scripting language which extends Css and then compiles down it to regular Css. <\/span><\/span><\/p>\n

Using Css became quite complex and repetitive for accomplishing little tasks such as closing tags, so, that is where css preprocessors comes into picture. As developer wanted more options when writing their styles, so, they built preprocessors for adding programming functionality. <\/span><\/span><\/p>\n

Salient features: <\/span><\/span><\/span><\/p>\n

– Arithmatics i.e. addition, substraction, multiplication, division<\/span><\/span><\/p>\n

– Variables<\/span><\/span><\/p>\n

– Functions<\/span><\/span><\/p>\n

– If & else conditions<\/span><\/span><\/p>\n

– Looping<\/span><\/span><\/p>\n

– Mixins<\/span><\/span><\/p>\n

– Extends<\/span><\/span><\/p>\n

– Color operations<\/span><\/span><\/p>\n

– Imports, etc.<\/span><\/span><\/p>\n

Pros and Cons of using Css Preprocessors:<\/span><\/span><\/span><\/p>\n

Pros<\/span><\/span><\/span><\/p>\n

– Cleaner code<\/span><\/span><\/p>\n

– Saves you huge time<\/span><\/span><\/p>\n

– Easy to setup<\/span><\/span><\/p>\n

– More organized<\/span><\/span><\/p>\n

– Faster development<\/span><\/span><\/p>\n

Cons<\/span><\/span><\/span><\/p>\n

– Learning curve<\/span><\/span><\/p>\n

– While working in a team…<\/span><\/span><\/p>\n

– And, too much of everything is a con (nesting, mixing)<\/span><\/span><\/p>\n

Sass Preprocessor<\/b><\/span><\/span><\/p>\n

\n

Sass is Ruby based Css extension. For running Sass, you need to have ruby installed. You can install sass with this command – <\/span><\/span>sudo gem install sass<\/span><\/span><\/code>. <\/span><\/span><\/code><\/p>\n

Once sass is installed, you can run it with the command sass input.scss output.css from your terminal. <\/span><\/span><\/code><\/p>\n

Let\u2019s understand \u2018Sass\u2019 by taking instances of variables,nesting and loops. <\/span><\/span><\/code><\/p>\n

Variables in Sass<\/span><\/span><\/span><\/code><\/p>\n

$font-size: 14px;<\/span><\/span><\/code>\n\ndiv {<\/span><\/span><\/code>\n    <\/code>font-size: $font-size;<\/span><\/span><\/code>\n}<\/span><\/span><\/code><\/pre>\n
Nesting in Sass<\/span><\/span><\/span><\/code><\/p>\n
$link-color: #000;<\/span><\/span><\/code>\nul {<\/span><\/span><\/code>\n    <\/code>margin: 0;<\/span><\/span><\/code>\n    <\/code>li {<\/span><\/span><\/code>\n        <\/code>float: left;<\/span><\/span><\/code>\n    <\/code>}<\/span><\/span><\/code>\n    <\/code>a {<\/span><\/span><\/code>\n        <\/code>color: $link-color;<\/span><\/span><\/code>\n    <\/code>}<\/span><\/span><\/code>\n}<\/span><\/span><\/code><\/pre>\n
Loops in Sass<\/span><\/span><\/span><\/code><\/p>\n
@for $i from 1px to 5px {<\/span><\/span><\/code>\n    <\/code>.border-#{i} {<\/span><\/span><\/code>\n        <\/code>border: $i dotted green;<\/span><\/span><\/code>\n    <\/code>}<\/span><\/span><\/code>\n}<\/span><\/span><\/code><\/pre>\n
Less Preprocesor<\/b><\/span><\/span><\/code><\/p>\n
\n
Since Less is written in Javascript, so, you will need NodeJS to run it. Install Less using <\/span><\/span><\/code>npm install -g less<\/span><\/span><\/span><\/code> on Linux\/Mac and use <\/span><\/span><\/code>lessc styles.less styles.css<\/span><\/span><\/span><\/code> <\/code>to compile it to Css.<\/span><\/span><\/code><\/p>\n
On windows, you first need to install Node.Js installer followed by:<\/span><\/span><\/code><\/p>\n
1. <\/span><\/span><\/code>npm install less<\/span><\/span><\/code> (install)<\/span><\/span><\/code><\/p>\n
2. <\/span><\/span><\/code>lessc styles.less styles.css<\/span><\/span><\/code> (compile)<\/span><\/span><\/code><\/p>\n
Here also, let\u2019s understand \u2018Less\u2019 by taking examples of variables, nesting and loops. <\/span><\/span><\/code><\/p>\n
Variables in Less<\/span><\/span><\/span><\/code><\/p>\n
@font-size: 14px;<\/span><\/span><\/code>\ndiv {<\/span><\/span><\/code>\n    <\/code>font-size: @font-size;<\/span><\/span><\/code>\n}<\/span><\/span><\/code><\/pre>\n
Nesting in Less<\/span><\/span><\/span><\/code><\/p>\n
@link-color: #000;<\/span><\/span><\/code>\nul {<\/span><\/span><\/code>\n    <\/code>margin: 0;<\/span><\/span><\/code>\n    <\/code>li {<\/span><\/span><\/code>\n        <\/code>float: left;<\/span><\/span><\/code>\n    <\/code>}<\/span><\/span><\/code>\n    <\/code>a {<\/span><\/span><\/code>\n        <\/code>color: @link-color;<\/span><\/span><\/code>\n    <\/code>}<\/span><\/span><\/code>\n}<\/span><\/span><\/code><\/pre>\n
Loops in Less<\/span><\/span><\/span><\/code><\/p>\n
.loop(@counter) when (@counter > 0){<\/span><\/span><\/code>\n    <\/code>.loop((@counter - 1));<\/span><\/span><\/code>\n    <\/code>.border-@{counter} {<\/span><\/span><\/code>\n        <\/code>border: 1px * @counter dotted green;<\/span><\/span><\/code>\n    <\/code>}<\/span><\/span><\/code>\n}\n<\/span><\/span><\/code>\nLet\u2019s Conclude our journey into Css preprocessors:<\/span><\/span><\/span><\/code> If you are technical and coming from programming background, then Css is very powerful and streamlined. Sass is more widely used beside Less, with rich set of features. All this makes Css highly extensible, maintainable and themeable. <\/span><\/span><\/code>\n\nPlease comment down your view points on my small post concerning #preprocessors_of_css. I\u2019d love to hear and answer you!\n\n<\/b><\/span><\/span><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Having prior mastery over CSS, it probably becomes easy to use its preprocessors, namely \u2013 Sass, Less & Stylus. Let\u2019s segregrate our learning of CSS Preprocessors into the following: ** CSS ** Preprocessors ** CSS Preprocessors ** Sass ** Less What is Css? Refering to Cascading style sheets, describes how … Continue reading What are CSS Preprocessors?<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":401,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-394","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design-and-development"],"_links":{"self":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":0,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts\/394\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/media\/401"}],"wp:attachment":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}