Sass part 4 – Built in modules and functions. Writing custom functions with @function and @return
css , SASS , Uncategorized / January 15, 2020

This is the fourth part of our Sass series. This part covers built-in modules, functions, and modularization in Sass. Part 1      – Introduction, variables, and nesting in Sass. Part 2     – @-rules and Directives. Part 3     – Operators and control directives in Sass       WHAT YOU WILL LEARN Sass modularization, built-in modules, and functions in Sass. Writing custom functions in Sass.   Sass modularization Sass moved built-in functions into separate built-in modules in its Dart version DartSass. The C++ version of the preprocessor LibSass and the Ruby version of the preprocessor RubySass do not have this modification. Sass introduces @use and @forward which can be used to create custom modules. @forward makes mixins, variables, and functions in your Sass module available in other Sass sheets.  The modules with these forwarded variables, mixins, and functions, are loaded to Sass sheets using @use. The built-in modules have functions and mixins which can be used to work on data types and selectors. Functions to observe the internal operations of Sass are also combined into a module. Functions can be classified into three types.  Functions to work with values of different data types, selector functions, and introspection functions….

Sass Part 5 – Understanding mixins, creating mixins in Sass using @mixin
css , SASS , Uncategorized / January 26, 2020

This is the fifth part of our Sass series. This part covers the concept of mixins, creating mixins in Sass using @mixins. Part 1      – Introduction, variables, and nesting in Sass. Part 2     – @-rules and Directives. Part 3     – Operators and control directives in Sass Part 4     – Built-in modules and functions. Writing custom functions with @function and @return     WHAT YOU WILL LEARN Concept of mixins mixins in Sass Mixins with arguments Mixins with content block   Mixins Mixins are a programming language concept by which a class is created to inject code into other classes. Units of functionality are combined together to form a mixin and this mixin can be used by other different classes. Methods of the Mixin class can be used by multiple classes and these classes need not be a child class of the Mixin. Mixins make the code clean and more maintainable.   Mixins in Sass Mixins in Sass are used to create styles that are to be reused throughout the stylesheet. Mixins improve code reusability.mixin are created using @mixin directives. @mixin Directive: Used to create Mixins.

The mixins are included in code using @include directives @include Directive: used to include…

Sass Part 6 – Sass with Node.js based applications, Sass output styles
css , SASS , Uncategorized / January 30, 2020

This part of the Sass series aims at helping to set up Sass in Node.js projects. Sass preprocessor used with Node.js is the one written in c++ called libSass. node-sass is the library which binds Node.js applications to LibSass preprocessor. Part 1      – Introduction, variables, and nesting in Sass. Part 2     – @-rules and Directives. Part 3     – Operators and control directives in Sass Part 4     – Built-in modules and functions. Writing custom functions with @function and @return Part 5     – Understanding mixins, creating mixins in Sass using @mixin   WHAT YOU WILL LEARN Setting up Sass in Node.js applications. The four output styles of Sass.   Sass with Node.js applications and Sass output styles Create a project with npm init. Install node-sass using the command

Now create an SCSS file, test.scss with the following syntax.

Now, there are four output styles in Sass. compressed nested compact expanded Output styles determine the style of generated CSS. –output-style provides the option for providing output style.      Now run the command

This command will generate a CSS file test.css, with a compressed style.

 

–output-style nested will generate a CSS file test.css with style like…

Share this page in social media platforms