I've been using compass with blueprint for a while now and one thing I can't figure out is why it generates all the basic blueprint css classes. Like these:
#container .span-3 { width: 110px; }
#container .span-4 { width: 150px; }
I specify --using blueprint/semantic when creating the compass project, and no I don't have #include blueprint anywhere in my source. Why are these classes being generated and how do I get compass not to include them?
I tried to reproduce your problem but I can't. Here's what I did and what I got:
compass create my_project --using blueprint/semantic
The generated screen.scss file seems to want you to #import "blueprint", as it contains the following lines initially:
// Import all the default blueprint modules so that we can access their mixins.
#import "blueprint";
The generated screen.css file does not contain .span-x anywhere, and the only place #container appears is in body.two-col #container {.
I modified the screen.scss file and recompiled. No change -- no non-semantic classes showed up in screen.css.
Hope this helps...
(Tested with Compass version 0.11.5, Ruby 1.8.7, FreeBSD 8.2)
Related
I use Symfony + Webpack Encore and try to split styles into "layout" and "page-based", but only to make development more comfortable: I still want to compile one css file for them (in fact, there is a limited number of such css files, each one for block of pages, but for easier understanding let's assume only one is necessary). So I do like this:
_global.scss
// ... bootstrap variables redefenition here
#import "~bootstrap/scss/bootstrap";
// ... common functions, mixins, font-face definitions here
.my_style1 {
padding-left: 12px;
padding-right: 12px;
}
.my_style2 {
#include make-container-max-widths();
}
app.css
#import "_global"
// other styles here
During the compilation (require('../css/app.scss'); only in my app.js) styles are ordered: [ global, bootstrap, app ] and I don't understand why. I mean, if you use them as:
<div class="container my-style1"></div>
container's padding will override defined in my-style1.
The most strange thing is that in dev app.css they are ordered as expected (my-style is lower than container), but in prod not (container is lower than my-style). When you work in dev (and Chrome display non-compiled styles, you also see that _grid.scss overrides _global.scss)
Sorry for this quick self-answer, I've really spent a lot of time before asking, but after it found the solution quickly. Hope, can save smb's time.
You should simply add other styles to app.js. This way they will recompile on any file change (in previous example they recompile only on app.scss change) and the order will become correct:
app.js
require('_global.scss');
require('app.scss');
I'm trying to import some classes from a CSS file like bootstrap.css to my site.scss SASS file, not all of them. The problem with following code is that I get all bootstrap classes in my compiled site.css file:
site.scss
#import "bootstrap";
.my-div-md-6
{
/*some other styles*/
#extend .col-md-6;
}
On the other hand, It is possible to do this with LESS by importing bootstrap.css as reference using this code:
site.less
#import (less, reference) "bootstrap.css";
.my-div-md-6{
/*some other styles*/
&:extend(.col-md-6);
}
The compiled output of LESS is very light as below:
site.css
.my-div-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 992px) {
.my-div-md-6 {
float: left;
}
.my-div-md-6 {
width: 50%;
}
}
.my-div-md-6 {
/*some other styles*/
}
Is it possible to achieve this with SASS? If yes, giving a quick example would help.
Unfortunately, there is not simple answer and at the time of writing this, Ruby Sass does not natively support the LESS import (reference) feature.
TLDR; Suggestions:
use uncss or postcss to remove the compiled css from file before finalising stylesheet.
if you can, use mixins and placeholder classes as a rewrite of the scss file, but this is the MOST time consuming.
import "file" as partial such that file="_file.scss" and #extend .class if you absolutely have to, (manual method but suppose it'll work)
UNCSS
You can use uncss as a package from npm to remove the compiled css (I know this isn't efficient, but if you had to use SASS), then you'd remove the chaff that's generated from the example bootstrap import.
HOW?
QUOTE: SO-Answer-Joesph
How? The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
Used stylesheets are extracted from the resulting HTML.
The stylesheets are concatenated and the rules are parsed by css-parse.
document.querySelector filters out selectors that are not found in the HTML files.
The remaining rules are converted back to CSS.
So yes, it removes selectors not in the DOM at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */ before them, e.g...
MAKE SURE YOU ADD THE MEDIA OPTION IN UNCSS
REF: SO-Answer-Deksden
SASS Background research:
Summarising above:
nex3: one of the core leads for sass, has been at google and working on dart. They released dart-sass (unstable release) as a rewrite in favour to replace and improve upon ruby sass. This is interesting as this rewrite also explains the lack of feature development in Ruby Sass as well as the need for a rewrite. Since a core contributor of a ruby sass port: i.e. libsass (C++ implementation of ruby-sass) left the libsass team, it brings a further impetus to improve on sass performance.
Credit:
Joesph
Deksden
I have just migrated from LESS to SASS/SCSS, because of most advice I've found on the net and new version of bootstrap.
But I am really missing one important feature of LESS that every class style can be treated as an mixin.
.social-icons__list {
.list-inline;
}
The problem is that I cannot use #include for simple class, it should be annotated with #mixin. And in case of placeholderI need also to annotate class with %.
But like in my case, I need to extend existing class and get behavior like using placeholder.
In case of SASS it generates following CSS
.list-inline, .social-icons__list {
padding-left: 0;
list-style: none;
margin-left: -5px; }
But I need to copy styles only
.social-icons__list {
padding-left: 0;
list-style: none;
margin-left: -5px; }
I would accept it, but I also had to download bootstrap sass sources and #import "../external-dependency/bootstrap-sass-3.3.7/assets/stylesheets/bootstrap";
And this line of code makes compiler to copy all styles from bootstrap sources into my compiled file.
So maybe there are solutions to these problems.
I would be grateful for any help.
Sass doesn't have class-as-mixin feature like Less. You only real option is #extend though, it's worth nothing the differences in how this behaves, that it hoists the class name to the class that you are #extend-ing.
The bootstrap issue is a separate one, as if you wanted to use BS classes as less mixins you would still need them in your compiled file. The best strategy for that is use the official bootstrap sass only import the parts you are using. There are also #mixins defined for most styles/components so you can just import the mixins files and use those if you don't want any actual classes.
I'm relatively new to SASS and bootstrap. I use bootstrap with SASS and struggle a little bit with a concept.
I always used CSS like this: one base CSS-file with the basic layout (eq. base.css). Every template includes additionally a different CSS-file (eq. sitemap.css, team.css, news.css). This CSS-files only contain the parts of the respective templates. So I can overwrite the definitions in the previous files.
In SASS everything is compiled in one file. In combination with bootstrap I actually struggle with the concept I used until now.
Every time I want to add a new CSS-file to the existing definitions, I get an error because I have to reinclude the complete bootstrap structure. But if I reinclude it, the whole bootstrap code gets written into the additional files (eq. sitemap.css, team.css, news.css) too. If I include both files in my HTML-tree, the bootstrap definitions (like the whole normalize block) gets defined two or more times.
I have this setup:
- css
|-- source
| |-- base.scss
| |-- team.scss
| |-- vendors
| | |-- bootstrap...
└-- output
|-- base.css
└-- team.css
In base.scss I include the bootstrap stuff. I do also need the bootstrap stuff in team.scss, but not all the main stuff like the normalize things.
How do I achieve that? Is that even possible or do I have to switch my css needs by adding a css-class to the body tag (like body.team)? But then I have to carry the whole CSS stuff of every page in one file. Isn't this crab?
Edit to clear things up a bit:
This is in base.scss:
#import "settings/vars";
#import "vendors/bootstrap";
...
header {
#extend .container;
...
.contentbox {
margin-top: $mainGap;
}
...
}
...
and this is in team.scss:
header .contentbox {
#extend .sr-only;
}
It's absolutely clear that "#extend .sr-only;" doesn't work in team.scss because of the absence of bootstrap. But if I include bootstrap with
#import "vendors/bootstrap";
in the first line of team.scss, I would automatically add all the standard 16kb bootstrap things to team.css as well. However, these definitions are already in base.css. So I would have a preventable overhead.
I think I know there is no way to say: "Hey bootstrap. I already included you in base.scss. So you don't have to write the whole main definition of yourself into team.scss again. But I need you because I like you as an usable framework. So please provide me the functions and variables anyway.". But perhaps?
What I do in this case is to compile base.scss with Bootstrap and all the base code and my customized _variables.scss. Then if I want to add team.scss I just import the mixins and the custom variables that I will need to use from Bootstrap. Sounds great!
but...
Since .sr-only and other are just provided as classes instead SASS mixins, you can't #include it, like you could do with the .transition mixin for example.
So, for the moment if you are using SASS, you have 2 options:
Import the Bootstrap module with the class you want to extend/reuse
//contain the .sr-only definition
#import "vendors/bootstrap/_scaffolding";
#import "vendors/bootstrap/_variables";
header .contentbox {
#extend .sr-only;
}
Copy/Paste the class from the Bootstrap source and extend it:
#import "vendors/bootstrap/_variables";
// Copy/Paste the .sr-only class to reuse, very un-DRY
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
header .contentbox {
#extend .sr-only;
}
What you're searching for is named a partial in Sass I guess:
If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do
#import "colors";
and _colors.scss would be imported.
FYI, in LESS it'd be an import option: #import (reference) "colors"
I'm using the Zurb Foundation toolkit, it contains two stylesheets, one being the app.css which is used for editing and adding elements. The following when added to the app.css do not reflect or update on my index page. From what I've seen this should be extremely simple but it hasn't worked for me. I'm using Aptana Studio 3.
body {
background-image:url('carbonfiber.png');
background-repeat:no-repeat;
background:#333333;
background-position:center;
}
#content {
margin-bottom:2000px
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:40px;
clear:both;
background-color:#C00 padding-bottom: 500px
}
You need to add the changes to the app.scss instead
Just do the following, open the command line: (leave this screen open while you work on your project)
compass watch your-project-folder
then any changes made to your .scss will be compiled into .css
With the zurb foundation, what I do is first create another file called _main.scss (under the sass folder) and then call it from within the /sass/app.scss file using #import main; any changes made to the _main.scss are compiled into a new stylesheet called /main.css and automatically added to the app.css file.
Hope it's clear.