Scss posun

Author: machal

Gruntfile.js

@@ -26,8 +26,10 @@ module.exports = function(grunt) {
           implementation: sass,
           sourceMap: true
       },
-      dist: {
-        "css/style.css": "scss/index.scss"
+      default: {
+        files: {
+          "css/style.css": "scss/index.scss"
+        }
       }
     },
 

scss/lib/_mixins.scss

@@ -8,7 +8,7 @@
 
 // Webkit-style focus
 // ------------------
-.tab-focus() {
+@mixin tab-focus() {
   // Default
   outline: thin dotted #333;
   // Webkit
@@ -18,65 +18,41 @@
 
 // Center-align a block level element
 // ----------------------------------
-.center-block() {
+@mixin center-block() {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
-// IE7 inline-block
-// ----------------
-.ie7-inline-block() {
-  *display: inline; /* IE7 inline-block hack */
-  *zoom: 1;
-}
-
-// IE7 likes to collapse whitespace on either side of the inline-block elements.
-// Ems because we're attempting to match the width of a space character. Left
-// version is for form buttons, which typically come after other elements, and
-// right version is for icons, which come before. Applying both is ok, but it will
-// mean that space between those elements will be .6em (~2 space characters) in IE7,
-// instead of the 1 space in other browsers.
-.ie7-restore-left-whitespace() {
-  *margin-left: .3em;
-
-  &:first-child {
-    *margin-left: 0;
-  }
-}
-
-.ie7-restore-right-whitespace() {
-  *margin-right: .3em;
-}
-
 // Sizing shortcuts
 // -------------------------
-.size(@height, @width) {
-  width: @width;
-  height: @height;
+@mixin size($height, $width) {
+  width: $width;
+  height: $height;
 }
-.square(@size) {
-  .size(@size, @size);
+
+@mixin square($size) {
+  @include size($size, $size);
 }
 
 // Placeholder text
 // -------------------------
-.placeholder(@color) {
+@mixin placeholder($color) {
   &:-moz-placeholder {
-    color: @color;
+    color: $color;
   }
   &:-ms-input-placeholder {
-    color: @color;
+    color: $color;
   }
   &::-webkit-input-placeholder {
-    color: @color;
+    color: $color;
   }
 }
 
 // Text overflow
 // -------------------------
 // Requires inline-block or block for proper styling
-.text-overflow() {
+@mixin text-overflow() {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -85,7 +61,7 @@
 // CSS image replacement
 // -------------------------
 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
-.hide-text {
+@mixin hide-text {
   font: 0/0 a;
   color: transparent;
   text-shadow: none;
@@ -98,7 +74,7 @@
 // -----------------------------------
 // Používáme např. v .out-of-box--blur
 
-.out-of-box-white-text() {
+@mixin out-of-box-white-text() {
 
   &,
   h1,

scss/variables/_variables.scss

@@ -59,9 +59,9 @@ $small-end-value:     ($large-start-value - 1);
 
 // Media Queries
 // (Pouzivame napr. jako @media @medium-start { … }
-$small-end:           ~"only screen and (max-width: @{small-end-value})";
-$large-start:         ~"only screen and (min-width: @{large-start-value})";
-$extra-large-start:   ~"only screen and (min-width: @{extra-large-start-value})";
+$small-end:           "only screen and (max-width: #{small-end-value})";
+$large-start:         "only screen and (min-width: #{large-start-value})";
+$extra-large-start:   "only screen and (min-width: #{extra-large-start-value})";
 
 
 // Padding