From IT Skills
Jump to: navigation, search

Requirements[edit]

Sass needs Ruby or LibSass

Sass of SCSS ?[edit]

Sass -

@import reset

html
  margin:  0
  padding: 0

SCSS -

@import 'reset';

html {
  margin: 0;
  padding: 0;
}

I recommend to use SCSS

unit-testing[edit]

Documentation[edit]

Structure[edit]

  • main.scss - primary Sass file
  • base.sass - imports for all mixins + global project variables

sets a couple of global variables and loads up all of my Sass modules. Again modules are not allowed to contain anything that would cause CSS output when importing. This allows me to build multiple stylesheets by importing different partials.

Directory structure[edit]

read! https://www.sitepoint.com/architecture-in-sass/ or https://scotch.io/tutorials/aesthetic-sass-1-architecture-and-style-organization

Hugo’s 7-1[edit]

|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   …                    # Etc.
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   …                    # Etc.
|
|– layout/
|   |– _navigation.scss  # Navigation
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   …                    # Etc.
|
|– pages/
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   …                    # Etc.
|
|– themes/
|   |– _theme.scss       # Default theme
|   |– _admin.scss       # Admin theme
|   …                    # Etc.
|
|– utils/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   …                    # Etc.
|
`– main.scss             # Main Sass file

!default[edit]

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.

Parent selector &[edit]

.main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

is compiled to:

.main {
  color: black; 
}
.main a {
  font-weight: bold; 
}
.main a:hover {
  color: red; 
}

= In SassScript[edit]

.foo.bar .baz.bang, .bip.qux {
  $selector: &;
}

The value of $selector is now ((".foo.bar" ".baz.bang"), ".bip.qux")

Nested properties[edit]

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

is compiled to:

.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

Interpolation: #{}[edit]

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

is compiled to:

p.foo {
  border-color: blue; 
}

Placeholder selector %[edit]

These look like class and id selectors, except the # or . is replaced by %. They’re meant to be used with the #@extend

@extend[edit]

extends are forbidden inside media queries

@mixin[edit]

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.

synonim: *

@include[edit]

synonim: +

$color: white;
* colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  +include colors { color: $color; }
}

generates

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

@function[edit]

$grid-width: 40px;

@function grid-width($n) {
  @return $n * $grid-width;
}

#sidebar { width: grid-width(5); }

Becomes:

#sidebar {
  width: 200px; }

Frameworks[edit]

Subcategories

This category has only the following subcategory.

S

Pages in category "Sass"

The following 3 pages are in this category, out of 3 total.