|
Listing 2-24. Output of Listing
2-23
a {
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
Chapter 2
■
IntroduCtIon to SaSS
26
Another feature of & is that it resolves the parent selector regardless of any depth in nesting. Consider
the code in Listing
2-25
.
Listing 2-25. & Is Nested Two Levels Below in the Style Declaration
#contentArea {
font-size:1em;
a#referenceLinkContainer{
background:#CCC;
&:hover{
border:1px solid #000;
}
}
}
The output is shown in Listing
2-26
.
Listing 2-26. Compiled output of Listing
2-25
#contentArea{ font-size: 1em;}
#contentArea a#referenceLinkContainer{background: #CCC;}
#contentArea a#referenceLinkContainer:hover{border:1px solid #000;}
Using Combinators in Your SCSS
Combinator selectors— +, >, and ~ —are used to combine selectors. They tell the browser which elements
are in context.
The > is also known as the child combinator. It’s used to select the immediate child of the parent. In
the previous example, it would select the immediate h1 of section. It will not target any h1’s that have been
nested inside a child element. See Listing
2-27
.
Listing 2-27. Example of Using a Combinator in CSS
.article{
section > h1{
line-height:1em;
}
}
The + is also known as the adjacent combinator. It’s used to select the next element at the same level. It
would not check the parent element’s children. It’s shown in Listings
2-28
and
2-29
.
Listing 2-28. HTML Markup to Demonstrate an Adjacent Combinator
Chapter 2
■
IntroduCtIon to SaSS
27
Listing 2-29. CSS Demonstrating an Adjacent Combinator
Article + p{
Color: #F00;
}
In the code shown in Listing
2-29
, the rule will apply to any p tag that is after the article tag and not
ones that are inside the article tags.
The ~ is called the general sibling combinator. It will select every article that comes after another article,
regardless of what elements are between them. See Listing
2-30
.
Listing 2-30. CSS Demonstrating the General Sibling Combinator
Article ~ article{
Color: #F00;
}
Comments
Like other programming languages, Sass supports single-line and multiline comments. Single-line
comments are created by prefixing them with //. Multiline comments are enclosed within /**/. Listing
2-31
shows some examples.
Listing 2-31. Comment Examples
// This is Single line comment
/* This is a
Multi line comment */
When the Sass file is compiled, multiline comments are retained while single-line comments are
removed.
Nesting Properties
Like nested rules, Sass also allows nesting of properties. For example, consider the properties like font-
family, font-size, and font-weight. These all come under the font namespace.
In Sass, you can nest properties that come under the same namespace, as shown in Listing
2-32
.
Listing 2-32. Nesting Properties
.content{
font: {
family: 'Tahoma';
size: 13px;
weight: bold;
}
}
Chapter 2
■
IntroduCtIon to SaSS
28
This code is compiled as shown in Listing
2-33
.
Listing 2-33. Output of Listing
2-32
.content{
font-family: 'Tahoma';
font-size: 13px;
font-weight: bold;
}
Interpolation
If you want to build your selectors or properties dynamically, interpolation is the thing you need. This comes
handy when you want use loops to generate styles. For example, you have an array containing names of
social network icons. You can use loop with interpolation to generate such styles. It can be used in a simple
situation where you want use a value stored in a variable in a class name, as demonstrated in Listing
2-34
.
Interpolation is done using the #{} syntax.
Listing 2-34. Example Showing Interpolation
$innerContainerClass: container;
.left .#{$innerContainerClass} {
width:50%;
display:inline-block;
}
Listing 2-35. Output of Listing
2-34
.left .container{
width:50%;
display:inline-block;
}
Placeholder Selectors
Placeholder selectors are special types of selectors that look similar to normal IDs or class selectors, but are
prefixed by % instead of # or .. Placeholders differ from other selectors in that they are not rendered in the
final output .css file.
Placeholder selectors (see Listing
2-36
) are used to extend certain sets of styles without rendering that
set in the final output. You will see its implementation the next chapter when you look at @extend.
Listing 2-36. Example of a Placeholder Selector
%importantText{
Color:red;
Font-weight:bold;
}
.notice{
@extend %importantText;
}
Chapter 2
■
IntroduCtIon to SaSS
29
Listing 2-37. Output of Listing
2-36
, where %importantText Has Been Rendered
.notice {
Color: red;
Font-weight: bold;
}
Logical Capabilities of Sass
Sass not only makes writing CSS easy and maintainable by incorporating the DRY principle, but it also adds
capabilities such as logic and calculations, which were missing in core CSS. With Sass, you can perform math
calculations, perform some operations on the basis of some condition, or do some looping. Let’s look into
these aspects in more detail.
Mathematical Operations in Sass
Sass supports addition, subtraction, multiplication, and division.
Addition
Addition can be done as shown in Listing
2-38
.
Listing 2-38. Example Showing Addition
.container{ width: 20%+80%;}
Note that mathematical operations can occur only with same type of operands. In other words, you
cannot perform mathematical operations between pixel and percentage.
Subtraction
Subtraction can be done as shown in Listing
2-39
.
Listing 2-39. Example Showing Subtraction
.container{ width: 80%-40%;}
Multiplication
Multiplication can be done as shown in Listing
2-40
.
Listing 2-40. Example showing Multiplication
.container{ width: 80%*40%;}
Chapter 2
■
IntroduCtIon to SaSS
30
Division
Division can be done as shown in Listing
2-41
.
Listing 2-41. Example showing Division
.container{ width: 80%/40%;}
Parentheses
In Sass, parentheses are used to manipulate the order of execution, as shown in Listing
2-42
.
Do'stlaringiz bilan baham: | 
