HTML and CSS Reference
In-Depth Information
In the mixins folder, you will see that there are several files that look like they
should be CSS properties such as _animation.scss and _gradient.scss. These
files are there to help remove some of the vendor specific CSS from polluting
the main SASS files by using mixins to create universal versions of the
properties. You can begin adding content to these files.
Open the empty _animations.scss file. This mixin will be used to create
animations and apply them across all vendors. If a new vendor specific
animation property is created, it can be added in one place rather than several
across your SASS files. Add the following code to the opened file.
@mixin animation ($values) {
animation:
$values;
-moz-animation:
$values;
-webkit-animation:
$values;
}
As you can see, it simply acts as a proxy for the standards based, Mozilla and
webkit animation properties by accepting a set of properties and then passing
them to the vendor specific animation properties. Save the file and close it.
Open the empty _box-sizing.scss file. This mixin provides support for box-
sizing. One of the most frustrating problems about flexible layouts in CSS is that
when you set an element to be 100% wide (the width of the parent element) with
padding, the browser will usually add the padding to the width of the element
even when the width is specified as 100%, so the result is that your element will
overstretch by the amount of padding that you add, sometimes pushing the
element off screen slightly or outside of it's parent element. The box-sizing
property helps to overcome this by:
Excluding any padding, margin or border from the width and
height of the element when using the content-box value
Including any padding with the width and height of the
element when using the padding-box value
Including any padding and border width with the width and
height of the element when using the border-box value
@mixin box-sizing ($value) {
-moz-box-sizing: $value;
-webkit-box-sizing: $value;
box-sizing: $value;
}
Again, this mixin simply acts as a proxy to the vendor specific properties by
passing the values to the property.
Finally, open the _gradient.scss file and add the following code to it.
Search WWH ::




Custom Search