Sass is a CSS preprocessor which enables advanced features, such as variables, mixins, and nesting.
1
vote
1answer
12 views
Mixin, @extend or (silent) class?
I am struggling with the basic concepts of SASS.
I have a page that has multiple section, all of them are sharing properties like width, font-size etc.
I would like to optimize my code and do one of ...
1
vote
0answers
20 views
Skeleton SASS Feedback and Review
recently I have been developing a SASSified version of Dave Gamache's Skeleton CSS front-end framework. I have publicly posted the code on github which can be found here as well as a live demo.
What ...
1
vote
0answers
23 views
Comments on SASS from CSS for a SASS beginner
I've leapt into SASS and am loving it. I'm asking for comments here on whether my SASS is well formatted, which I think is on-topic, if not please tell me in comments and I'll try and fix or delete.
...
3
votes
1answer
34 views
Innefficient scss selectors being generated
Im using Foundation by Zurb as a front-end framework. Below is the SCSS used to generate the basic layout of the homepage using the Semantic Grid Mixins Foundation supplies ...
2
votes
1answer
52 views
SASS 960 Grid Review
I'm currently converting a css 960 fluid grid to SASS. How can I improve my current implementation? My column classes .two.columns are getting a bit unruly is there a better way to do them?
// ...
2
votes
0answers
195 views
SASS based semantic fluid grid
I am looking for opinions on this code. I have been experimenting with SASS the last few days and have come up with the following bit of code. The idea was to enable the creation of a fluid grid ...
5
votes
1answer
335 views
Good practice using SCSS
I saw a sassy CSS for a rails app like this:
$std-margin: 30px;
@mixin solid-bg($color: #EEEEEE) {
background: none repeat scroll 0 0 $color;
}
@mixin solid-border($direction, $width: 1px, ...
3
votes
1answer
375 views
Tips/good practice to reach maximum efficiency using SCSS (Sassy CSS).
This is what I've done so far:
$block-height: 180px;
@mixin block {
float: left;
margin-bottom: 20px !important;
margin-right: 20px !important;
overflow: hidden;
}
#content h2 {
...
