scss cheat sheet

scss-cheat-sheet

This applies to every paragraph with class center
p.center {
  text-align: center;
  color: red;
}

HAML Markup that applies to the last css
%p.center This paragraph is color red
%p.center
  This is a red too
%h2
  .yolo
    %p.center Guess what, this is also red


----------------------------------------------


Grouping selectors with comma is useful when you want to share the same style with among several selectors.
This applies to every h1, h5 and p

h1, h5, p {
    text-align: center;
    color: red;
}

%h1
  This is a red centered heading
  %h5 Smaller red heading
%p This is a red paragraph


------------------------------------------------

Combinators

http://www.w3schools.com/css/css_combinators.asp

Descendant Selector

  Selects all <p> elements inside <div> elements

  div p {
      background-color: yellow;
  }

Child selector

  selects all elements that are the immediate children of a specified element.
  selects all <p> elements that are immediate children of a <div>

  div > p {
      background-color: yellow;
  }



Adjacent Sibling Selector

  selects all <p> elements that are placed immediately after <div> elements


  div + p {
      background-color: yellow;
  }

  %div
    %p Paragraph 1 in the div.
    %p Paragraph 2 in the div.
  %p Paragraph 3. this is yellow
  %p Paragraph 4. his is not


General Sibling Selector
  The general sibling selector selects all elements that are siblings of a specified element.

  selects all <p> elements that are siblings of <div> elements:

  div ~ p {
      background-color: yellow;
  }


  %div
    %p Paragraph 1 in the div.
    %p Paragraph 2 in the div.
  %p Paragraph 3. this is yellow
  %p Paragraph 4. this is yellow too


------------------------------------------------

Attribute Selectors

http://www.w3schools.com/css/css_attribute_selectors.asp

This selects all <a> elements with a target="_blank" attribute

a[target="_blank"] {
    background-color: yellow;
}


------------------------------------------------

Pseudo classes

http://www.w3schools.com/css/css_pseudo_classes.asp

:first-child
:last-child


------------------------------------------------

Pseudo elements

http://www.w3schools.com/css/css_pseudo_classes.asp

it can be used to:

Style the first letter, or line, of an element
Insert content before, or after, the content of an element

::after
::before

------------------------------------------------


Priority of styles according level of placement

Inline style > Internal style (Inside the html file)> External style

%head
  :css
    h1 {
        color: orange;
    }
%body
  %h1{:style => "color:red;"} This is a heading with internal style
  %p The style of this document is a combination of an external stylesheet, and internal style


  ------------------------------------------------

Selector of an element inside another.

For all %li in %ul

Set the URL of the image, and show it only once (no-repeat)
Position the image where you want it (left 0px and vertical value: center)
Position the text in the list with padding-left

ul li {
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px center;
    padding-left: 15px;
}

%ul
  %li Coffee
  %li Tea
  %li Coca Cola


-----------------------------------------------------

Displaying objects

http://www.w3schools.com/css/css_display_visibility.asp

Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden".

This dont affect the layout, the element is is still there but not visible

h1.hidden {
    visibility: hidden;
}


This affects the layout, the element is no longer there

h1.hidden {
    display: none;
}

This makes all li to be displayed in a single line (horizontally), if the number of elements exceeds the width of the parent element, they will continue to be displayed below as another row.

li {
    display: inline;
}

This will make all span elements to be displayed vertically one after another.

span {
    display: block;
}


-----------------------------------------------------


Positioning

http://www.w3schools.com/css/css_positioning.asp

Fixed
Relative
Absolute


-----------------------------------------------------


Aligning elements

http://www.w3schools.com/css/css_align.asp

right
center
left


-----------------------------------------------------

Responsive web design

http://www.w3schools.com/css/css_rwd_intro.asp


Responsive images
http://www.w3schools.com/css/css_rwd_images.asp