I've set of styles which I want to use in multiple places in my CSS.
Here is my function:
#function form-element-dimension{
height: 34px;
padding: 3px 10px;
line-height: 18px;
border: solid 1px #e2e7eb;
}
I will use this function anywhere in my .scss page like below:
.dataTables_length{
select{
form-element-dimension();
}
}
---
---
.contact-form-style{
input{
form-element-dimension();
}
}
How to do this in COMPASS SASS framework?
Although it's really not the best way to do what you're doing, this is how you'd achieve it with sass;
#mixin form-element-dimension {
height: 34px;
padding: 3px 10px;
line-height: 18px;
border: solid 1px #e2e7eb;
}
.dataTables_length {
select {
#include form-element-dimension();
}
}
.contact-form-style {
input {
#include form-element-dimension();
}
}
Related
I just finished with the Sass guide.
The guide explains mixins:
..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.
and extend:
.. This is one of the most useful features of Sass. Using #extend lets
you share a set of CSS properties from one selector to another ..
It looks like 'extend' may be implemented in 'mixin' (it seems 'mixin' is extend of 'extend' :-) ).
// #extend
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
#extend .message;
border-color: green;
}
.error {
#extend .message;
border-color: red;
}
.warning {
#extend .message;
border-color: yellow;
}
// #mixin
#mixin message($color) {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: $color;
}
.success { #include message(green); }
.error { #include message(red); }
.warning { #include message(yellow); }
and even more because mixins have params.
But on the other hand the processed CSS is not exactly the same. But it will be same style effect on the DOM.
/* extend processed */
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333; }
.success {
border-color: green; }
.error {
border-color: red; }
.warning {
border-color: yellow; }
/* mixin processed */
.success {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: green; }
.error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: red; }
.warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: yellow; }
My question is how do these features differ?
When should I use one over the other?
From http://blog.nakulrajput.com/mixins-extends-and-placeholders/:
#mixin
Here is how mixins work. Definition and usage:
#mixin awesome {
width: 100%;
height: 100%;
}
body {
#include awesome;
}
p {
#include awesome;
}
The snippets above produce the following CSS:
body {
width: 100%;
height: 100%;
}
p {
width: 100%;
height: 100%;
}
To make things a little bit more interesting, we could make our mixin accept parameters. Even better, we are able to define default values if the mixin is called without arguments.
#mixin awesome($w: 100%, $h: 100%) {
width: $w;
height: $h;
}
body {
#include awesome(960px);
}
p {
#include awesome;
}
The result will be similar, but the width of the body is different.
body {
width: 960px;
height: 100%;
}
p {
width: 100%;
height: 100%;
}
If you use mixins, the styles in them are duplicated for each selector.
Mixins are very helpful if you need to change or calculate something in the final output, for example if you need to apply border-radius to several elements.
However, in some other cases there is a lot of duplicative code, which could be avoided if you use #extend.
**#extend**
.awesome {
width: 100%;
height: 100%;
}
body {
#extend .awesome;
}
p {
#extend .awesome;
}
It's similar, isn't it. In Sass it looks almost identical, but the CSS the result is:
.awesome, body, p {
width: 100%;
height: 100%;
}
Shorter than the version using a mixin. You can't pass parameters during the extending, but that's not the idea actually.
#extend should be used in those places where you want to share properties between the elements.
Well, Mixin is like function that can do some work and output processed result while extend is like pre-defined cop-paste code
In programming terms:
#include is like calling a function with or without parameters
#extend is like Inheritance
Function means, every time we call the function, the body of the function gets duplicated as we might pass dynamic information in the form of parameters. so you would get a Copy of the body.
Inheritance means, there is no duplication and we get a Reference instead of copy. so who ever extends that reference would get the same body.
My idea is that I would like to write silent classes for input[type=text], input[type="password"] and input[type=submit]. I would then #extend them in a mixin by passing hem through as a variable.
My parser is throwing this error;
Syntax error: Invalid CSS after " #extend ": expected selector_sequence, was "$type;"
Here is my code;
%text {
(text styling)
}
%password {
#extend %text;
}
%submit {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
#mixin input($type) {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
#extend $type;
}
Any help would be appreciated
try using variables interpolation
#extend #{$type};
Further information on SASS Reference
While Fabrizio's answer is formally correct, consider not going that way.
There's a great rule in programming of any kind: "keep it simple, stupid!" aka KISS.
Though SASS provides such advanced facilities as extends and mixins, it doesn't mean that you should use them as much as possible. Don't make your code complicated when you don't have to!
This code does exactly what you want: applying styles to input[...] selectors:
input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
input[type=text], input[type=password] {
font-family: Verdana; // Text styles
}
input[type=submit] {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
If you want to apply styles to custom classes/ids, consider this approach:
/////////////////
// Silent classes
/////////////////
%input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
%text {
#extend %input;
font-family: Verdana;
}
%password {
#extend %text;
}
%submit {
#extend %input;
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
///////////////////////////
// Applying silent classes:
///////////////////////////
.some .weirdly .nested input[type=text] {
#extend %text;
}
.password {
#extend %password;
}
#the-submit-button {
#extend %submit;
}
Demo: http://sassbin.com/gist/5956909/
My idea is that I would like to write silent classes for input[type=text], input[type="password"] and input[type=submit]. I would then #extend them in a mixin by passing hem through as a variable.
My parser is throwing this error;
Syntax error: Invalid CSS after " #extend ": expected selector_sequence, was "$type;"
Here is my code;
%text {
(text styling)
}
%password {
#extend %text;
}
%submit {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
#mixin input($type) {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
#extend $type;
}
Any help would be appreciated
try using variables interpolation
#extend #{$type};
Further information on SASS Reference
While Fabrizio's answer is formally correct, consider not going that way.
There's a great rule in programming of any kind: "keep it simple, stupid!" aka KISS.
Though SASS provides such advanced facilities as extends and mixins, it doesn't mean that you should use them as much as possible. Don't make your code complicated when you don't have to!
This code does exactly what you want: applying styles to input[...] selectors:
input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
input[type=text], input[type=password] {
font-family: Verdana; // Text styles
}
input[type=submit] {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
If you want to apply styles to custom classes/ids, consider this approach:
/////////////////
// Silent classes
/////////////////
%input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
%text {
#extend %input;
font-family: Verdana;
}
%password {
#extend %text;
}
%submit {
#extend %input;
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
///////////////////////////
// Applying silent classes:
///////////////////////////
.some .weirdly .nested input[type=text] {
#extend %text;
}
.password {
#extend %password;
}
#the-submit-button {
#extend %submit;
}
Demo: http://sassbin.com/gist/5956909/
I'm trying to clean up my CSS to be cleaner by using SCSS.
Standard CSS:
.dark-hr,
.light-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
background-color: #595959;
}
.light-hr {
background-color: #cccccc;
}
vs SCSS:
.generic-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
#extend .generic-hr;
background-color: #595959;
}
.light-hr {
#extend .generic-hr;
background-color: #cccccc;
}
Is there any way to avoid creating the 'generic-hr' class that won't be used? I was hoping that some kind of nest would work well.
In this scenario the CSS is definitely way cleaner and more readable than SCSS.
Ideally I would need this to work in SCSS:
.## {
// base class that is not outputted
.dark-hr {
//attributes the extend the base class '.##'
}
.light-hr {
//attributes the extend the base class '.##'
}
}
OUTPUT:
.dark-hr, .light-hr {
//shared attributes defined by '.##'
}
.dark-hr {
// overrides
}
.light-hr {
// overrides
}
What you're wanting to use is an extend class (I call them "silent classes"), which is signified by using a % instead of a ..
hr%base {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
#extend hr%base;
background-color: #595959;
}
.light-hr {
#extend hr%base;
background-color: #cccccc;
}
Wouldn't you normally do something like this:
.generic-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
&.dark {
background-color: #595959;
}
&.light {
background-color: #cccccc;
}
}
My pattern for this kind of thing is a mixin:
#mixin generic-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
#include generic-hr;
background-color: #595959;
}
.light-hr {
#include generic-hr;
background-color: #cccccc;
}
This has the added advantage of being extensible, so if you find yourself needing several selectors with really similar properties you can add in variables:
#mixin generic-hr($background-color: transparent) {
width: 100%;
height: 1px;
margin: 15px 0px;
background-color: $background-color;
}
.dark-hr {
#include generic-hr(#595959);
}
.light-hr {
#include generic-hr(#cccccc);
}
.medium-hr {
#include generic-hr(#818181);
}
I have this variable:
$gutter: 10;
I want to use it in a selector like so SCSS:
.grid+$gutter {
background: red;
}
so the output becomes CSS:
.grid10 {
background: red;
}
But this doesn't work. Is it possible?
$gutter: 10;
.grid#{$gutter} {
background: red;
}
If used in a string for example in a url:
background: url('/ui/all/fonts/#{$filename}.woff')
From the Sass Reference on "Interpolation":
You can also use SassScript variables in selectors and property names using #{} interpolation syntax:
$gutter: 10;
.grid#{$gutter} {
background: red;
}
Furthermore, the #each directive is not needed to make interpolation work, and as your $gutter only contains one value, there's no need for a loop.
If you had multiple values to create rules for, you could then use a Sass list and #each:
$grid: 10, 40, 120, 240;
#each $i in $grid {
.g#{$i}{
width: #{$i}px;
}
}
...to generate the following output:
.g10 { width: 10px; }
.g40 { width: 40px; }
.g120 { width: 120px; }
.g240 { width: 240px; }
Here are some more examples..
Here is the solution
$gutter: 10;
#each $i in $gutter {
.g#{$i}{
background: red;
}
}
if it would be a vendor prefix, in my case the mixin did not compile. So I used this example
#mixin range-thumb()
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
input[type=range]
&::-webkit-slider-thumb
#include range-thumb()
&::-moz-range-thumb
#include range-thumb()
&::-ms-thumb
#include range-thumb()