Category Archives: CSS

Before knowing SASS features, if you want to know the setup and syntax, you can follow with my previous blog.

Overview:
1. Variables ($)
2. Mixins(@mixin)
3. Extend(@extend)
4. Functions (@function)
5. Math Operators (+,-,%,/)
6. Control Directives(@if, @for, @each, @while)

1. Variables($):
By using variables, you can store the value, and reuse it where you need in our style sheet.
Sass uses the ‘$’ symbol for creating variable.

You can refer to them in properties:

Example:

Compiled CSS:

2. Mixins(@mixin):
Mixins are defined with the @mixin directive following with the name of mixin and optionally the arguments.
By using @mixin directive, you can include properties from one rule-set to another.

For inserting the content of the mixin use @include directive.

Compiled CSS:

3. Extends(@extend):
By using @extend directive, you can share a set of CSS properties from one selector to another.

Then use @extend to include the styles.

Compiled CSS:

4. Functions(@function):
Functions are used to perform calculations. A Sass function does not output any CSS.
Instead, it returns a value that can be used in the CSS. For the full reference and examples,
you can follow the official documentation here.

Compiled CSS:

5. Math Operators:
By using Math operators, you can Perform arithmetic and color alterations directly to style sheet values.

Compiled CSS:

6. Control Directives:
SassScript supports basic control directives and expressions for including styles only under
some conditions or including the same style several times with variations.

@for: The @for directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms: @for $var from <start> through <end> and @for $var from <start> to <end>.

Compiled CSS:

For the full reference and examples, you can follow the official documentation here.

Overview:
1. What is SASS?
2. Why SASS?
3. How to setup SASS?
4. Syntax
5. SASS Features

1.What is SASS?
SASS stands for Syntactically Awesome Stylesheets and was created by Hampton Catlin. It is a CSS pre-processor which helps to reduce repetition with CSS and saves time.

Sass introduces new concepts like variables, mixins, and nesting into the CSS code . These concepts ultimately make your CSS awesome, easier to write and more dynamic.

2. Why SASS?
a.  Create more manageable, reusable, compact style sheets
b.  Faster development time.
c.  Programmatic CSS features.

3. How to setup SASS?
Before you start using SASS, you need to setup any one of the below tools.
a. Ruby
c. Koala
c. Gulp

3.a. SASS with Ruby

First we will need to install Ruby Installer. It’s a single-click installer that will get everything set up for you super fast.

Install Sass. Ruby uses Gems to manage its various packages of code like Sass. In your open terminal window type:

To run Sass from the command line, just use

You can also tell Sass to watch the file and update the CSS every time the Sass file changes:

If you have a directory with many Sass files, you can also tell Sass to watch the entire directory:

Files can be automatically converted from one syntax to another by using the sass-convert command:

3.b. SASS with Koala
Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.

To Install and uses, please follow with http://koala-app.com/

3.c. SASS with Gulp
We will need to install ‘gulp’ and ‘gulp-sass’ by using NPM(NodeJs Package Manager)

Next you need to do a few things inside gulpfile.js. First we need to get access to gulp, and then we have to actually set up the task that will run and compile the sass to css.

Since gulp runs on node, we use the require() function to get access to our modules.
Next add the below code inside gulpfile.js for running the tasks what you want

The above code is for compiling the file from SASS to CSS

The above code is for watch the file and update the CSS every time the Sass file changes

To run Sass by using gulp from the command line, just use

4. Syntax
Currently we have two syntax-es are available.
1. SASS (Symantic Awesome Stylesheets)           2. SCSS(Sassy CSS)

1. Indented syntax (.SASS)
– Much different from traditional CSS syntax
– No curly braces or semi colons
– More strict

2. Sassy CSS (.SCSS)
– Superset of CSS
– If you know css, already writing in SCSS
– Easier to work with existing CSS

Examples:

SASS:

SCSS:

Compile to CSS:

5. Features:
a. Variables ($) : Creation and use of recallable information.
b. Mixins (@mixin) : Writing reusable styles mixed with optional arguments.
c. Extend/Inheritance (@extend) : Easily manage CSS class reuse and inheritance in the         stylesheet, rather than HTML.
d. Operations (+, -, *, / and %) : Perform arithmetic and color alterations directly to stylesheet values.
e. Directives (@if, @for, @each, @while) : A primer on the programmatic tools in Sass,       including  functions and each loops.

If you want to know the SASS features in deep, you can check out here.

CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily. If you are a front-end developer there is a good chance that you have heard about pseudo-elements as well as CSS’s content property.

What is Content Property?
In this blog, we’ll focus on the content property. CSS’s content property is used with the ::before and ::after pseudo-elements, to insert generated content  (which can use either single- or double-colon syntax). The property is used to insert generated content in a web page and it is fully supported in all major browsers.

Before going to Content Property, Let’s once again recap about pseudo-elements:

CSS-Pseudo Elements
CSS pseudo-elements are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects. A simple syntax of pseudo-element is as follows-

CSS classes can also be used pseudo-elements are as follows-

The most commonly used pseudo-elements are as follows

Value Description
:first-line Use this element to add special styles to the first line of the text in a selector.
:first-letter Use this element to add special style to the first letter of the text in a selector.
:before Use this element to insert some content before an element.
:after Use this element to insert some content after an element.

Basic syntax for the content Property
The syntax for the content property is broken down as follows, with each of the values represented:

Syntax:

The Syntax differs slightly from value to value. For example, to use the attr() value with ::before or ::after, you need to write CSS like the following:

Example:

Output: Plunk it…

That’s just one example, and more on that later. In the following sections, we will discuss each value, including attr().

Value: none or normal
When set to none, the pseudo-element is not generated. If you set it to normal it computes to none for the ::before and ::after pseudo-elements.

Example:

Output: Plunk it…

This kind of thing might be used in nested elements that already have a pseudo-element defined but you want to override the pseudo-element in certain contexts.

Value: <string>
This value sets the content to a string and can be any text content. If using non-latin characters, the characters need to be encoded.

Let’s look at examples of each. Consider the following HTML:

And then the following CSS:

Output: Plunk it…

Value:<URL>
The <URL> value comes in handy when you are interested in displaying some sort of media, which you can do by pointing to an external resource (for instance an image). If for some reason the resource or image can’t be displayed, it is either ignored or some placeholder takes its place. Let’s look at some code that demonstrates the use of this value.

Here is the HTML:

And this is the CSS to show blog point’s favicon along with some text:

Output: Plunk it…

Value: counter() or counters()
This value is the most complex value that can be used with the content property. It is written as one of two different functions — counter() or counters().

In the case of the first function, counter() , the generated text is the value of the innermost counter of the name that you specify in scope at this pseudo-element. It is formatted in decimal by default but can also be formatted in roman numerals.

The other function, counters(name, string), is similar but represents all counters with the specified name (the first parameter) in the order from outermost to innermost. All these values are separated by the specified string (the second parameter). If you specify the name for the counter variable as none, inherit, or initial the declaration is ignored.

Here is an example to illustrate how to use a counter:

And here is the CSS:

Output: Plunk it…

This will number the items with generated content, similar to an ordered list. In this case, we could have easily used an ordered list. These types of counters are much handier when the items being numbered are interspersed among other elements.

Value: attr()
As shown earlier, the attr() function will insert the value of the specified attribute, which is the sole parameter. If the concerned element has no attribute, an empty string is returned.

Here’s an example:

With the above HTML, the CSS below will show the value of the href attribute in parentheses next to the linked text:

Output: Plunk it…

Value: open-quote or close-quote
When set to one of these values, the content property generates an opening or closing quotation mark. It’s customarily used along with the <q> element, but you can use it with any element. So you might do something like the following:

The close-quote value will work only with the ::after pseudo-element (for obvious reasons) and it will not produce anything if a value of open-quote is not also present on the same element using ::before.

Value: no-open-quote or no-close-quote
The no-open-quote value removes the opening quote from the specified element and the no-close-quote removes the closing quote. You might wonder how these values are useful.

Look at the following HTML:

Output: Plunk it…

Take note that in the above paragraph, the speaker is quoting someone (“A wise man…”) who, in turn, is also quoting others (“those who say…”). So we have quotes nested 3 levels deep. Grammatically, there is a correct way to handle this. If using generated content.

Here is how we can ensure the quotes are nested correctly:

The first selector defines the kinds of quotes we want to use, three levels deep, using the quotes property. Then we insert the quotes as content using pseudo-elements. This is similar to what we did in the previous section.

But what if we want the second level of quotes to be ignored and not inserted, for whatever reason? We can use the no-open-quote and no-close-quote values to override them:

Example:

In this case, I’ve added a class of no quotes to the second level quote. This ensures that the quote nesting is still recognized, but the quotes don’t appear for that element. So the third level quote in that paragraph will have double curly quotes around it, rather than single curly quotes.

We hope this blog helped you to understand each of the values of the content property a little better and how they can be used in various scenarios. If you have any questions or queries please leave your comments below.