sass Archives - Page 2 of 2 - Donotsad where can learn any thing work project and make money

Aug 10

Sass – Mixin Directives

Sass – Mixin Directives ”; Previous Next Mixins allow creating a group of styles, which are reusable throughout your stylesheet without any need to recreation of non-semantic classes. In CSS, the mixins can store multiple values or parameters and call function; it helps to avoid writing repetitive codes. Mixin names can use underscores and hyphens interchangeably. Following are the directives present in Mixins − S. No. Directive & Description 1 Defining a Mixin @mixin directive is used to define the mixin. 2 Including a Mixin @include directive is used to include the mixins in the document. 3 Arguments The SassScript values can be taken as arguments in mixins, which is given when mixin is included and available as variable within the mixin. 4 Passing Content Blocks to a Mixin Block of styles are passed to the mixin. Print Page Previous Next Advertisements ”;

Aug 10

Sass – Comments

Sass – Comments ”; Previous Next In this chapter, we will study about Sass Comments. Comments are non-executable statements, which are placed in source code. Comments make source code easier to understand. SASS supports two types of comments. Multiline comments − These are written using /* and */. Multiline comments are preserved in CSS output. Single line comments − These are written using // followed by comments. Single line comments are not preserved in CSS output. Example The following example demonstrates the use of comments in the SCSS file − <html> <head> <title>SASS comments</title> <link rel = “stylesheet” type = “text/css” href = “style.css”/> </head> <body> <h1>Welcome to TutorialsPoint</h1> <a href = “http://www.tutorialspoint.com/”>TutorialsPoint</a> </body> </html> Next, create file style.scss. style.scss /* This comment is * more than one line long * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } // These comments are in single line // They will not appear in the CSS output, // since they use the single-line comment syntax. a { color: blue; } You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command − sass –watch C:rubylibsassstyle.scss:style.css Next, execute the above command; it will create the style.css file automatically with the following code − style.css /* This comment is * more than one line long * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } a { color: blue; } Output Let us carry out the following steps to see how the above given code works − Save the above given html code in sass_comments.html file. Open this HTML file in a browser, an output is displayed as shown below. To study about interpolation within multiline comments, click this link. Sass – Interpolation in Multiline Comments Description Interpolation within the multiline comments are resolved in the resulting CSS. You can specify variables or property names within the curly braces. Syntax $var : “value”; /* multiline comments #{$var} */ Example The following example demonstrates the use of interpolation in multiline comments in the SCSS file − <html> <head> <title>SASS comments</title> <link rel = “stylesheet” type = “text/css” href = “style.css”/> </head> <body> <h1>Welcome to TutorialsPoint</h1> <p>This is an example for Interpolation in SASS.</p> </body> </html> Next, create file style.scss. style.css $version: “7.8”; /* Framework version for the generated CSS is #{$version}. */ You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command − sass –watch C:rubylibsassstyle.scss:style.css Next, execute the above command; it will create the style.css file automatically with the following code style.css /* Framework version for the generated CSS is 7.8. */ Output Let us carry out the following steps to see how the above given code works − Save the above given html code in sass_comments_interpolation.htm file. Open this HTML file in a browser, an output is displayed as shown below. Print Page Previous Next Advertisements ”;

Aug 10

Sass – Home

Sass Tutorial PDF Version Quick Guide Resources Job Search Discussion SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of document structurally. This tutorial covers the basics of SASS. Audience This tutorial will help both students as well as professionals, who want to make their websites or personal blogs more attractive. Prerequisites Before you proceed with this tutorial, we assume that you know − Basic word processing using any text editor. How to create directories and files. How to navigate through different directories. Internet browsing using popular browsers like Internet Explorer or Firefox. How to develop simple Web Pages using HTML or XHTML. If you are new to HTML and XHTML, then we would suggest you to go through our HTML Tutorial or XHTML Tutorial first. Print Page Previous Next Advertisements ”;

Aug 10

Using Sass

Using Sass ”; Previous Next SASS is more powerful and stable that provides power to the basic language by using extension of CSS. You can use SASS in three different ways − As a command line tool As a Ruby module As a plugin for Rack enable framework If you are using SASS on windows, then you need to install Ruby first. For more information about installing Ruby, refer the SASS Installation chapter. The following table shows the commands, which are used for executing the SASS code − S. No. Command & Description 1 sass input.scss output.css It is used to run the SASS code from the command line. 2 sass –watch input.scss:output.css It informs SASS to watch the file and update the CSS whenever SASS file changes. 3 sass –watch app/sass:public/stylesheets It is used to watch the entire directory, if SASS contains many files in a directory. Rack/Rails/Merb Plugin Rack is a web server interface, which is used for developing web applications in Ruby. For information about Rack, just visit this link. You can enable the SASS in the Rails 3 version using the environment.rb file present under the config folder. Enable the SASS for the Rails 3 using the following code − config.gem “sass” You can use the following line to the Gemfile for the Rails 3(and above version), as − gem “sass” Rails is an open-source web framework that uses web standards such as JSON, HTML, CSS and JavaScript for displaying user interface. To work with Rails, you need to have a basic knowledge of Ruby and object-oriented programming. Learn more about on Rails framework here. If you want to enable the SASS in Rack application, add the following lines to the config.ru file, which is present in the app”s root directory − require ”sass/plugin/rack” use Sass::Plugin::Rack Merb is a web application framework, which provides speed and modularity to Rails. To know more about Merb, just open this link. You can enable the SASS in Merb by adding the following line to the config/dependencies.rb file − dependency “merb-haml” Caching SASS caches documents such as templates and partials, which can be reused without parsing them unless they have changed. It makes compilation of SASS files faster and works even better when the templates are divided into separate files, which are all imported into one large file. If you delete cached files, they will be generated again when you compile next time. Options You can set the options in the environment.rb file of Rails or config.ru file of Rack application by using the following line − Sass::Plugin.options[:style] = :compact You can also set options in the init.rb file of Merb by using the following line − Merb::Plugin.config[:sass][:style] = :compact There are some options available with SASS and SCSS as described in the table given below − S. No. Option & Description 1 :style It displays style of the output. 2 :syntax You can use indented syntax for sass and CSS extension syntax for scss. 3 :property_syntax It uses indented syntax to make use of properties. If it is not correct, then it will throw an error. For instance, consider “background: #F5F5F5” in which background is a property name and #F5F5F5 is its property value. You must use colon after the property name. 4 :cache It speeds up compilation of SASS files. It is set to true by default. 5 :read_cache It read only SASS files if cache is not set and read_cache is set. 6 :cache_store It can be used to store and access the cached result by setting it to an instance of Sass::CacheStores::Base. 7 :never_update It should never update the CSS file if the template files changes. By default it is set to false. 8 :always_update It should update the CSS file whenever the template files changes. 9 :always_check It should check for the updates whenever the server starts. It will recompile and overwrite the CSS file, if there is an update in the SASS template file. 10 :poll It uses polling backend for Sass::Plugin::Compiler#watch (which watches the template and updation of CSS files) by setting it to true. 11 :full_exception It displays the error description whenever an exception occurs in SASS code within generated CSS file. It displays a line number where an error occurred along with source in the CSS file. 12 :template_location It provides the path for the template directory in the application. 13 :css_location It provides the path for the CSS stylesheets in the application. 14 :unix_newlines It provides Unix style newlines when writing files by setting it to true. 15 :filename It is name of the filename being displayed and used for reporting errors. 16 :line It specifies the first line of the SASS template and displays the line numbers for errors. 17 :load_paths It is used to load the paths for SASS template which are included using @import directive. 18 :filesystem_importer It is used to import files from file system that uses Sass::Importers::Base sub class to handle string load paths. 19 :sourcemap It generates source maps which instructs browser to find the SASS styles. It uses three values − :auto − It contains relative URIs. If there is no relative URI, then uses “file:” URI. :file − It uses “file:” URIs, which work locally, not on remote server. :inline − It contains source text in the source map which is used to create large source map files. 20 :line_numbers It displays the line number for errors reported in the CSS file by setting it to true. 21 :trace_selectors It helps to trace the selectors of imports and mixins when it is set to true. 22 :debug_info It provides debug information of SASS file using line number and file when it is set to true. 23 :custom It makes data available to SASS functions in the separate applications. 24 :quiet It disables the warnings by setting it to true. Syntax Selection You can determine which syntax you are using in the SASS template by using the SASS command

Aug 10

Sass – Interview Questions

Sass – Interview Questions ”; Previous Next Dear readers, these SASS Interview Questions have been designed specially to get you acquainted with the nature of questions you may encounter during your interview for the subject of SASS. As per my experience good interviewers hardly plan to ask any particular question during your interview, normally questions start with some basic concept of the subject and later they continue based on further discussion and what you answer − What is SASS? SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes style of document cleanly and structurally. Why to use SASS? It is pre-processing language which provides indented syntax (its own syntax) for CSS. It allows writing code more efficiently and easy to maintain. It is super set of CSS which contains all the features of CSS and is an open source pre-processor, coded in Ruby. It provides document style in good structure format than flat CSS. It uses re-usable methods, logic statements and some of the built in functions such as color manipulation, mathematics and parameter lists. List out some features of SASS? It is more stable, powerful and compatible with versions of CSS. It is super set of CSS and is based on the JavaScript. It is known as syntactic sugar for CSS which means it makes easier way for user to read or express the things more clearly. It uses its own syntax and compiles to readable CSS. You can easily write CSS in less code within less time. It is an open source pre-processor which is interpreted into CSS. What are advantages of SASS? It allows writing clean CSS in a programming construct. It helps in writing CSS quicker. It is superset of CSS which helps designers and developers work more efficiently and quickly. As Sass is compatible with all versions of CSS, we can use any available CSS libraries. It is possible to use nested syntax and useful functions such as color manipulation, mathematics and other values. What are disadvantages of SASS? It takes time for developer to learn new features present in this pre-processor. If more number of people working on the same site, then will use the same preprocessor. Some people use the Sass and some people use the CSS to edit the files directly. So it will become difficult to work with site. There are chances of losing benefits of browser”s built-in element inspector. Name the two syntaxes supported by SASS? SASS supports two syntaxes namely SCSS and Indented syntax. The SCSS (Sassy CSS) is an extension of CSS syntax that makes much easier to maintain large stylesheets and can recognize vendor specific syntax and many CSS. SCSS files use the extension .scss. The Indented is an older syntax and sometimes just called as Sass. Using this form of syntax, CSS can be written concisely. SASS files use the extension .sass. In how many ways you can use the SASS? You can use SASS in three different ways − As a command line tool As a Ruby module As a plugin for Rack enable framework What are nested rules in SASS? Nesting is combining of different logic structures. Using SASS, we can combine multiple CSS rules within one another. If you are using multiple selectors, then you can use one selector inside another to create compound selectors. How to refer parent selector in the SASS? You can select the parent selector by using the & character. It tells where the parent selector should be inserted. How to write placeholder selector in SASS? SASS supports placeholder selector using class or id selector. In normal CSS, these are specified with “#” or “.“, but in SASS they are replaced with “%“. Mention the different types of operations on the SASS? There are 5 types of operations − Number Operations Color Operations String Operations Boolean Operations List Operations What are number operations? It allows for mathematical operations such as addition, subtraction, multiplication and division. What are color operations? It allows using color components along with arithmetic operations. What are list operations? Lists represent series of values which are separated using commas or space. What are boolean operations? You can perform boolean operations on Sass script by using and, or and not operators. What are parentheses in SASS? Parentheses is pair of signs which are usually marked off by round brackets ( ) or square brackets [] which provides symbolic logic that affect the order of operations. What is interpolation in SASS? It provides SassScript variables in selectors and property names using #{ } syntax. You can specify variables or property names within the curly braces. What is variable defaults? You can set default values for variables by adding !default flag to the end of the variable value. It will not re-assign the value, if it is already assigned to the variable. What is import directive? It directly takes the filename to import and all the imported files will get combined in a single CSS file. What is media directive? It set style rule to different media types. What is extend directive? It is used to share rules and relationships between selectors. It can extend all another class styles in one class and can also apply its own specific styles. What is at-root directive? It is is a collection of nested rules which is able to make style block at root of the document. What is @if directive? It is used to selectively execute the code statements based on the result of the evaluating an expression. What is @else if directive? The @else if statements are used with the @if directive, whenever the @if statement fails then the @else if statements are tried and if they also fails then the @else is executed. What is @for directive? It allows you to generate styles in a loop. The counter variable is used to set the output

Aug 10

Sass – CSS Extensions

Sass – CSS Extensions ”; Previous Next In this chapter, we will study about CSS Extensions. CSS Extensions can be used to enhance the functionality of the web pages. The following table lists down some of the CSS extensions used in SASS − S. No. CSS Extension & Description 1 Nested Rules It is a way of combining multiple CSS rules within one another. 2 Referencing Parent Selectors: & It is the process of selecting parent selector by using the & character. 3 Nested Properties It allows nesting of properties into other properties which leads to grouping of another related code. 4 Placeholder Selectors Sass supports placeholder selector using class or id selector by making use of @extend directive. Print Page Previous Next Advertisements ”;