Skip to content

Instantly share code, notes, and snippets.

@CodeRecipez
CodeRecipez / operations_advanced_list_of_values.md
Last active December 15, 2015 13:08
Sass 101 - A newb's guide: Operations Advanced - list of values

Lists are how Sass represents the values of CSS declarations like margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif. Lists are just a series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they’re just lists with one item.

On their own, lists don’t do much, but the [Sass list functions][list-function] make them useful. The [nth function][nth-function] can access items in a list, the [join function][join-function] can join multiple lists together, and the [append function][append-function] can add items to lists. The [@each rule][each-rule] can also add styles for each item in a list.

[Read more on lists][read-more] [list-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions [nth-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#nth-instance_method [join-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#join-instance_method [append-function]: http://sass-lang.com

@CodeRecipez
CodeRecipez / operations_list_of_values.md
Last active December 15, 2015 13:08
Sass 101 - A newb's guide: Operations - list of values

Lists are how Sass represents the values of CSS declarations like margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif. Lists are just a series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they’re just lists with one item.

By themselves, lists don't do much. This example illustrates using a list with the [@each rule][each-rule] to create a series of CSS rules based on a list of vendor prefixes.

[Read more on lists][read-more] [read-more]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists [each-rule]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive

$prefix-defaults: -moz- -webkit- -o- -ms- "" !default;
@CodeRecipez
CodeRecipez / operation_range_numbers_silent_placeholders.md
Last active December 15, 2015 12:59
Sass 101 - A newb's guide: Operations range of numbers w/silent placeholders

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>.

The following illustrates how you can use [placeholder selectors][placeholder] to create a series of options that don't process into CSS until [extended][extend] into another selector.

$cols: 12;

@for $i from 1 through $cols {
  %grid_#{$i}of#{$cols} {
 @include grid($i, $grid_context: $cols);
@CodeRecipez
CodeRecipez / operations_range_of_numbers.md
Last active June 5, 2019 16:56
Sass 101 - A newb's guide: Operations range of numbers

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>.

Note the difference in the keywords through and to. $var can be any variable name, like $i; <start> and <end> are SassScript expressions that should return integers.

The @for statement sets $var to each successive number in the specified range and each time outputs the nested styles using that value of $var. For the form from <start> through <end>, the range includes the values of <start> and <end>, but the form from <start> to <end> runs up to but not including the value of <end>.

from <start> through <end>

$cols: 2;
@CodeRecipez
CodeRecipez / operation_w_directive.md
Last active December 15, 2015 12:59
Sass 101 - A newb's guide: Operations w/directive

All types support equality operations (== and !=). In addition, each type has its own operations that it has special support for.

SassScript supports the standard arithmetic operations on numbers (+, -, *, /, %), and will automatically convert between units if it can.

Relational operators (<, >, <=, >=) are also supported for numbers, and equality operators (==, !=) are supported for all types.

In the following example you will see that operators are very handy with comparing values for control directives. SassScript supports basic control directives for including styles only under some conditions or including the same style several times with variations.

operation_w_directive.scss

@CodeRecipez
CodeRecipez / color_operations.md
Last active December 15, 2015 12:59
Sass 101 - A newb's guide: Color operations

All arithmetic operations are supported for color values, where they work piecewise. This means that the operation is performed on the red, green, and blue components in turn.

In the following example, ff + 26, 00 + 93, and aa + ff will create the final color of ff93ff

color_operations.scss

SassMeister Gist

@CodeRecipez
CodeRecipez / operations_inside_function.md
Last active December 15, 2015 12:59
Sass 101 - A newb's guide: Operation inside a function

It is possible to define your own functions in sass and use them in any value or script context.

Functions can access any globally defined variables as well as accept arguments just like a mixin. A function may have several statements contained within it, and you must call @return to set the return value of the function.

As you will see in the following example, creating a function that allows for custom arguments based on global values and uses Sass operations can be a powerful tool.

operations_inside_function.scss

SassMeister Gist

@CodeRecipez
CodeRecipez / operations.md
Last active December 15, 2015 12:59
Sass 101 - A newb's guide: operations

All types support equality operations (== and !=). In addition, each type has its own operations that it has special support for.

SassScript supports the standard arithmetic operations on numbers (+, -, *, /, %), and will automatically convert between units if it can.

Relational operators (<, >, <=, >=) are also supported for numbers, and equality operators (==, !=) are supported for all types.

operations.scss

@CodeRecipez
CodeRecipez / mixins_w_expressions_in_selectors_property_names_interpolation.md
Last active December 15, 2015 12:58
Sass 101 - A newb's guide: Mixins w/expressions in Selectors and Property Names (interpolation)

You can use SassScript variables in selectors and property names using #{} interpolation syntax.

It’s also possible to use #{} to put SassScript into property values. In most cases this isn’t any better than using a variable, but using #{} does mean that any operations near it will be treated as plain CSS.

mixins_w_expressions_in_selectors_property_names_interpolation.scss

@CodeRecipez
CodeRecipez / mixins_w_default_arguments.md
Last active December 15, 2015 12:58
Sass 101 - A newb's guide: Mixins w/global default arguments

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

mixins_w_default_arguments.scss

SassMeister Gist