Currently I am using
#import "compass";
to include some boiler plate compass code but it doesn't actually do anything.
here's my base.scss files code
#import "compass";
#import "compass/css3";
#hello{
width: 200px;
height: 510px;
color: blue;
}
when it compiles my result is
/* line 3, sass/base.scss */
#hello {
width: 200px;
height: 510px;
color: blue;
}
I assumed that this would include some more CSS. Am I doing something wrong?
Is there a library I am supposed to download and add to my project?
No, Compass is designed to be a do-it-yourself toolkit of things that are useful for any project, rather than a prepackaged product like Twitter's Bootstrap. It does not emit any styles unless you explicitly say so (eg. invoking a mixin).
There are Compass modules out there that are a little more drag and drop like you were probably expecting, but you'll have to hunt them out for yourself.
Related
Say I am using SASS and I want to borrow heavily from some existing stylesheet, be it another SASS stylesheet or a CSS one. I can #import that other sheet, then use #extend to use some of its rules. Is there an option to then exclude all the other stuff I didn't use from the resulting CSS?
#import takes the whole stylesheet/partial and puts it in your stylesheet, there's no way to exclude any of the rules aside from overwriting them all to defaults. If you have an originating SASS file you could abstract them all into partials and then #import what you need into your new file.
There's no way to import another sass file so that #extends can be used without rendering the content. Create and import a partial full of %placeholders to use #extend without renders content would be a good choice if it wasn't be rendered like this:
_import.scss
%button {
color: #fff;
width: 72px;
height: 24px;
}
main.scss
#import "import";
.button-blue {
#extend %button;
background-color: blue;
}
main.css
.button-blue {
color: #
width: 72px;
height: 24px; }
.button-blue {
border: 1px solid #fff; }
So I think that the best way to achieve your goal is import a partial with some mixins in your style, I 've been using sass for half a year and so far I haven't had a need to import #extends yet so please, tell me what you want to do exactly with the #extend and I will try to help you to get it with a #mixin
tl:dr version: is there a way to #extend a css class and not have the original class appear in my compiled css without changing all my css classes to %placeholder classes?
Short answer based on the below answers: it appears there is no way to do this unless you go through and convert the css to silent/placeholder classes e.g. convert .one{} to %one{} and even then that will cause problems with media queries.
I have a css file (lets call it "style.css") which contains 200+ CSS classes to style various elements like forms and buttons etc. What I want is to include some of those classes in a project and other classes from that file in other random projects/websites. With each new project I also want to give the classes random semantic class names of my choosing.
My preprocessor of choice when working with CSS is SCSS and I really need an answer that uses the power of SCSS.
Here is a quick example of what I'm talking about - loading css into a SCSS file and then extending that css with my own class names:
//style.css
.one {
color: red;
padding-top: 1px;
}
//style2.scss
#import "style.css";
.two {
#extend .one;
}
The problem here is that my SCSS file will compile to CSS and look like this:
//style2.css
.one {
color: red;
padding-top: 1px;
}
.two {
color: red;
padding-top: 1px;
}
But what I want to do is only include the second class, which I gave a special name.
I've tried a few ways of doing this but here's one example that does not work but is along the lines of what I was thinking I should be able to do:
A.) First, I grab the style.css file and chuck copy/paste it into a style.scss file.
B.) Second I wrap all the whole thing in a placeholder/silent class, like so:
//style.scss
%placeholder {
.one {
color: red;
padding-top: 1px;
}
}
C.) Then I import that SCSS file and try and extend a class of my choosing that is within the placeholder, like this:
//style2.scss
#import "style";
.two {
#extend .one;
}
When I try and compile this I get a blank css file (and rightly so for trying to be too tricky). The other thing I know is that you can't extend nested selectors so "#extend %placeholder .one;" is also out of the question.
My question is this: does anyone know of a way to import and then extend a css class so that the compiled result does not include the imported css?
The only other solution I can think of is to just delete the imported css from the top of my file before I let it out into the wild. But this is honestly less than ideal solution.
Thank you in advance to any answers :)
You're using placeholders incorrectly, the placeholder should simply be one, no need to wrap it. Try this:
// style.scss
%one {
color: red;
padding-top: 1px;
}
// style2.scss
#import "style";
.two {
#extend %one;
}
Note that there is an issue with this approach. While the outputted CSS is leaner than using a mixin (#include), you will not be able to use %one inside of any #media queries. Ie. this will not work:
// style2.scss
#import "style";
#media screen and (max-width:1024px) {
.two {
// This won't produce CSS as it's inside the media query
#extend %one;
}
}
The only way I'm aware to get around this is to use a mixin instead of a placeholder which will result in more CSS (if you use one more than once).
// style.scss
#mixin one() {
color: red;
padding-top: 1px;
}
// style2.scss
#import "style";
#media screen and (max-width:1024px) {
.two {
#include one();
}
}
I've detailed the difference in output between mixins and placeholder selectors on my blog if you're not aware.
I've recently played around with CSS grids, including great frameworks like Susy (http://susy.oddbird.net/), Foundation (http://foundation.zurb.com/) & the semantic grid system (http://semantic.gs/).
They all share this option of "including" a grid mixin instead of specifying a html class e.g.
.some-div{
#include grid-column(4);
}
While this seems like a good semantic approach, i was wondering about the cost in terms of css weight, css logic and if it's really worth it just to be semantic?
What are the pros and cons of using a mixin grid vs html classes?
Why HTML/CSS semantics are important
There are some much articles on the web about this! Just google it and you'll find a lot of invaluable information.
Here's a good one: How Important Is Semantic HTML?
Semantic html is important because it’s:
Clean — It’s easier to read and edit, which saves time and money during maintenance, and you don't have to force all your users to download a bloated library of styles many of which are not even used on the website
More accessible — It can be better understood by a greater variety of devices. Those devices can then add their own style and presentation based on what’s best for the device. It's also more appropriate for JS frameworks.
Search engine friendly — This is still debatable as search engines rank content and not code, but search engines are making greater use of things like microformats to understand content.
The most important argument for me is that semantic approach is just... the right thing to do. Follow this methodology carefully and you'll have so less causes for regrets.
Why i don't agree with #Mohamad's answer
Google is a bad example
Google's approach to semantics is extremist and violates their own style guide so many times that it's ridiculous. Just have a look at the HTML code of Google search results or HTML and you'll feel sick. It is necessary to understand that Google is an ultra high load website and they trade everything in favor of milliseconds of loading.
CSS is bulky to work with, use SASS
The main Mohamad's argument is that semantic approach is difficult on large projects. In fact, that's only true for old school CSS.
Indeed, it is counter productive to use semantic style with pure CSS. The larger the project, the more effort it requires to go for semantic approach.
But there's SASS. Whoever has tried SASS, never returns to vanilla CSS. SASS offers an incredible lot of powerful improvements, some of which make coding semantically effortless.
SASS code is compiled into normal CSS code. The most important thing to understand about SASS is that you only have to care about the structure and readability of your SASS code. The resulting CSS code may be hard to read and contain duplicates, but it is not a problem because CSS is gzipped by server.
#extend
The most important SASS feature in concern of HTML/CSS semantics is the #extend directive. It allows you injecting a reusable block of styles into semantic selectors, while producing efficient CSS.
First, declare a block of styles to be reused, for example:
%glyph {
display: inline;
width: 16px;
height: 16px;
background-repeat: no-repeat; }
You can later include it into different selectors semantically:
.star {
#extend %glyph;
background-image: url('../images/star.png'); }
.extenral-link {
#extend %glyph;
background-image: url('../images/external-link.png'); }
The resulting CSS will be very efficient:
.star, .extenral-link {
display: inline;
width: 16px;
height: 16px;
background-repeat: no-repeat; }
.star {
background-image: url("../images/star.png"); }
.extenral-link {
background-image: url("../images/external-link.png"); }
#include
Unfortunately, you can't use the beautiful #extend feature within media queries. So if you do responsive design, you'll have to produce CSS code with duplicate fragments. As i said earlier, duplication in CSS is not a problem thanks to gzip, it's the cleanness of SASS that matters.
Mixins (#include) allow you to inject blocks of reusable styles into selectors. They are not grouped effectively, but they accept arguments and can produce varying styles for different semantic selectors:
#import 'singularitygs';
$breakpoint: 300px;
$grids: 2 3;
$grids: add-grid(6 at $breakpoint);
%column {
background-color: pink;
min-height: 5em;
margin-bottom: 1em;}
#welcome {
#extend %column;
#include grid-span(1, 1);
#include breakpoint($breakpoint) {
#include grid-span(2,1); }}
#product-features {
#extend %column;
#include grid-span(1, 2);
#include breakpoint($breakpoint) {
#include grid-span(2,3); }}
#description {
#extend %column;
clear: both;
#include breakpoint($breakpoint) {
#include grid-span(2,5); }}
Produces:
#welcome, #product-features, #description {
background-color: pink;
min-height: 5em;
margin-bottom: 1em;
}
#welcome {
width: 38.09524%;
float: left;
margin-right: -100%;
margin-left: 0%;
clear: none;
}
#media (min-width: 300px) {
#welcome {
width: 31.03448%;
float: left;
margin-right: -100%;
margin-left: 0%;
clear: none;
}
}
#product-features {
width: 57.14286%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
#media (min-width: 300px) {
#product-features {
width: 31.03448%;
float: left;
margin-right: -100%;
margin-left: 34.48276%;
clear: none;
}
}
#description {
clear: both;
}
#media (min-width: 300px) {
#description {
width: 31.03448%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
}
Demo: http://sassbin.com/gist/5883243/
Compass extensions
As you noticed above, i use a grid-span mixin that is not declared in code. That's because it comes from the awesome Singularity extension.
The ecosystem of numerous Compass extensions provides you a great set of tools for all needs: semantic grid systems, responsive design, colors, math, all kinds of styles... You don't have to reinvent a thousand of wheels for every project you build!
What to read about SASS
This is a great starting point for SASS newcomers: https://github.com/Snugug/training-glossary/wiki , created by Sam Richard aka Snugug.
I often feel that some advocates of semantic grids have never written complex applications. The answer, as ever, is the proverbial "depends."
It depends on your style, your team, and your application. In some projects that required modular design, being semantic required extra code and effort for very little return. In others, simpler ones, it was fine. Take a look at the CSS that Google uses. Not everyone is Google-size, but that illustrates my "depends" point.
The advent of HTML 5 has solved some of these problems with tags such as section, header, and article. I tend to use those semantically. But my CSS class names tend to describe abstract divisions of my design, not what the thing is specifically.
There are no straight answers, but careful not to waste too much time worrying about this stuff. It means very little if your application is late or does not make it out of the door.
Do what you and your team feel comfortable with.
I'm trying to get Blueprint (SCSS-Syntax) working with my Rails (3.1) project.
To keep it simple at first I set up a plain HTML file (outside my rails project) with some basic blueprint syntax, after installing compass and creating the basic scss files with:
compass install blueprint .
It produces a sass directory with a screen.scss that contains:
#import blueprint
among other stuff, but the stylesheets/screen.css doesn't contain span-x instructions, as I was expecting after watching Compass: A Real Stylesheet Framework by Chris Eppstein (http://vimeo.com/4335944) and most importantly my HTML is looking dull as ever.
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div class="container">
<div class="span-24">
<center>
<h1 class="alt box">asdfhlakshf sdfgs dgf sdf sdfg fsd g</h1>
</center>
</div>
<div class="pre">
asdfhlakshf
</div>
<div class="span-4 success colborder">
WOW
</div>
</div>
</body>
</html>
My screen.css looks like this (small excerpt):
/* line 44, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_form.scss */
form.bp input.text, form.bp input.title, form.bp input[type=email], form.bp input[type=text], form.bp input[type=password] {
width: 300px;
}
/* line 46, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_form.scss */
form.bp textarea {
width: 390px;
height: 250px;
}
/* line 39, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */
form.bp .box {
padding: 1.5em;
margin-bottom: 1.5em;
background: #e5ecf9;
}
/* line 42, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */
form.bp .border {
padding-right: 4px;
margin-right: 5px;
border-right: 1px solid #dddddd;
}
/* line 45, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */
form.bp .colborder {
padding-right: 24px;
margin-right: 25px;
border-right: 1px solid #dddddd;
}
/* line 47, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */
form.bp hr {
background: #dddddd;
color: #dddddd;
clear: both;
float: none;
width: 100%;
height: 0.1em;
margin: 0 0 1.45em;
border: none;
}
Calling
compass compile
Just tells me everything stays unchanged. But it does something once I add
#import "blueprint/grid"
for example. Still no pretty html though.
The second I copy a precompiled screen.css (downloaded from the blueprint website) to the stylesheets folder everything works like a charm. It's the same inside of my rails project. I can use the precompiled css there without problems.
I guess I'm missing something basic here I need to do for the compass compiling magic to work, but I can't figure out what it is.
Thanks in advance for any ideas!
Versions
compass 0.11.5 (Antares)
ruby 1.8.7 (outside of the rails project)
ruby 1.9.2 (with the rails project)
using rvm 1.6.21
Installed haml 3.1.2 and sass 3.1.4. Though I think that this should not be relevant since I used html and scss, right?
Maybe I should have included more of my screen.scss:
// This import applies a global reset to any page that imports this stylesheet.
#import "blueprint/reset";
// To configure blueprint, edit the partials/base.sass file.
#import "partials/base";
#import "blueprint/grid";
// Import all the default blueprint modules so that we can access their mixins.
#import "blueprint";
// Import the non-default scaffolding module.
#import "blueprint/scaffolding";
// To generate css equivalent to the blueprint css but with your
// configuration applied, uncomment:
// #include blueprint
// If you are doing a lot of stylesheet concatenation, it is suggested
// that you scope your blueprint styles, so that you can better control
// what pages use blueprint when stylesheets are concatenated together.
body.bp {
#include blueprint-typography(true);
#include blueprint-utilities;
#include blueprint-debug;
#include blueprint-interaction;
// Remove the scaffolding when you're ready to start doing visual design.
// Or leave it in if you're happy with how blueprint looks out-of-the-box
}
form.bp {
#include blueprint-form;
// You'll probably want to remove the scaffolding once you start styling your site.
#include blueprint-scaffolding; }
// Page layout can be done using mixins applied to your semantic classes and IDs:
body.two-col {
#container {
#include container; }
#header, #footer {
#include column($blueprint-grid-columns); }
#sidebar {
// One third of the grid columns, rounding down. With 24 cols, this is 8.
$sidebar-columns: floor($blueprint-grid-columns / 3);
#include column($sidebar-columns); }
#content {
// Two thirds of the grid columns, rounding up.
// With 24 cols, this is 16.
$content-columns: ceil(2 * $blueprint-grid-columns / 3);
// true means it's the last column in the row
#include column($content-columns, true); } }
I also tried changing my ruby version and renaming the sass folder to scss. I'm running out of ideas here...
Alright. It was something basic. I didn't uncomment the "#include blueprint" line, because I thought #import blueprint should be enough and I go an error message, when I tried.
Turns out the error message was solved by adding a semicolon to the end of the line.
Maybe the smicolon should be added in the shipped screen.scss. I'll send an email to the author.
I have researched SASS and Blueprint seperately, and think I understand how they work, and I have set up my project directory using the compass CLI tool, but I am at a loss as to the correct way to organize my project.
After initializing my project with
$ compass create my_project --using blueprint/semantic
...I was told to link the generated CSS files in my HTML with these lines
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
...but where should I put my own application-specific .scssfiles and how should I include the appropriate blueprint files?
It seems to me that I should not be including the generated print.css and screen.css directly into my HTML but instead doing something like:
#import "screen";
body {
#include container;
}
...and then using only the file generated from the above in my HTML. Otherwise why would we have a line like this in screen.scss?:
// Import all the default blueprint modules so that we can access their mixins.
#import "blueprint";
I can't use mixins in my HTML.
I'm finding the docs to be very vague and contradictory, and any sort of short example illustrating the combination of:
HTML
SCSS files generated from compass command above
SCSS files containing site-specific styling
would be very helpful for me and probably others.
The "screen.scss" and "print.scss" files are nothing magical. These are just example filenames given to the output which you can link from your HTML, but you don't have to: just delete them and create your own files if you prefer, or add your own styles to them. The intent with these 2 files is to keep the style concerns organized separately: you could add a "mobile.scss" and then link all these in your HTML, or import them together into one master file under #media blocks.
I can't use mixins in my HTML.
Mixins don't apply to your HTML. They are a helpful technique used for writing your SCSS source code: the compiled CSS output or the HTML doesn't know anything about them. You should be using mixins to take advantage of Sass.
I have researched SASS and Blueprint seperately
It's important to understand what the Blueprint classes do first, but when you use Compass there are different approaches for how you apply frameworks like Blueprint:
1. Use Blueprint's original non-semantic class names throughout your HTML
This is not considered best-practice, but it's a way to get started especially when wireframing/scaffolding:
screen.scss
#import "blueprint";
// This outputs Blueprint's classes into your stylesheet:
#include blueprint;
#sidebar { background: $blue; }
#main { background: $yellow; }
screen.css (compiled)
.column { float: ... }
.span-6 { width: ... }
.span-12 {width: ... }
/* ...etc., all of Blueprint's classes ... */
#sidebar { background: #ccf; }
#main { background: #ffc; }
index.html
<div id="sidebar" class="column span-6">sidebar content</div>
<div id="main" class="column span-12">main content</div>
The result is the same as using Blueprint without Sass/Compass. Your HTML would contain the presentational classes, which are really not too different from just using style="width:120px" on your elements: it's just done using classes instead.
2. Use Blueprint as mixins into your own semantic class names:
screen.scss
#import "blueprint";
// Do not output Blueprint's classes into your stylesheet.
// Instead, write your own classes and mixin the functionality:
#sidebar {
#extend .column;
#include span(6);
background: $blue; }
#main {
#extend .column;
#include span(12);
background: $yellow; }
screen.css (compiled)
.column, #sidebar, #main { float: left; ... }
#sidebar { width: 240px; background: #ccf; }
#main { width: 480px; background: #ffc; }
index.html
<div id="sidebar">sidebar content</div>
<div id="main">main content</div>
As you can see, the second method moves Blueprint's presentation logic out of the HTML and into the stylesheet.
The judicious use of #extend (instead of #include) is an optimization that lets you group common styles together, e.g. all the elements that are "columns" are defined once as a list of selectors; only their different widths are included directly into each element.