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.
Related
In this Bootstrap 4 tutorial https://www.youtube.com/watch?v=MDSkqQft92o&time_continue=24&app=desktop # 14:44, he redefines Bootstrap classes in his style.scss file.
style.scss:
.navbar {
width:100%;
background: none !important;
#media(max-width:34em){
background:black !important;
}
.nav-bar-toggler {
cursor:pointer;
outline:0;
}
}
What is the advantage? Since it is just CSS, shouldn't it go in the style.css file?
SASS is a CSS preprocessor and whatever you code in SASS will become CSS eventually. Basically SASS is just CSS with Variables, Nesting, and many more. You can check more here http://sass-lang.com/guide.
I checked the vid for like 3 secs and I think he's just showing how to use SASS specifically the Nesting feature.
It does go into the style.css file: You don't write that file yourself, but it's rendered from the sass file, therfore you write everything into the sass file.
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 am experimenting on themes. For this i have downloaded and installed ruby.
I am clueless as in how to have a different css file to have my own theme for the application.
I think i have make changes to a file with an extension .scss. Can someone walk me through the steps to have my own theme for the application ?
Why not you define partials for theme and put theme related stuff in variables. These partials whould'nt create any .css file. Here is example
Make 3 files home.scss, _homePartials.scss and _homeTheme.scss
_homePartials.scss
$textColor: #333;
_homeTheme.scss
.text { color:$textColor; }
home.scss
.text { width:100%; }
#import '../partials/homePartials';
#import '../partials/homeTheme';
take a look at http://blog.behance.net/dev/how-we-used-sass-to-build-17-websites-in-five-days
I wanted to use twitter bootstrap CSS only in a specific element in my web page.
I tried to do it like in code below. But after compiling this to a css file nothing was outputted. If I moved #import outside #my_div then I got all css definitions for twitter boostrap.
#my_div {
#import "../twitter_bootstrap/lib/bootstrap.less";
}
How can I namespace a less css file?
I am not using less on the live site, nor am I manually doing the compiling so this is kind of a "simple" version. It's not as automated as the others but may apply to some users.
Edit bootstrap.css / bootstrap-responsive.css
.tb {
// copy/paste the entire bootstrap.css
}
Recompile with less or use an online less compiler - http://winless.org/online-less-compiler
Edit the now-compiled file and change body {} CSS declarations to tb {}.
Use the new CSS file.
Place your "bootstrapped" content inside a <div class='tb'></div>
LESS documentation has a section about namespaces.
So you could define your lib in a separate document:
#ns {
.twitter () {
// Instructions to be used later
// Nothing will appear in compiled CSS except if called later (because of parenthesis)
}
}
import this file at the beginning of the CSS file to be compiled and use these instructions:
#my_div {
#ns > .twitter;
}
This is how I have done it. This takes place in the root of the bootstrap folder that is downloaded, or cloned from git.
## ./less/namespace.css (New file)
#ns {
.twitter() {
#import "less/bootstrap.less";
}
}
## ./style.less
#import "less/namespace.less";
.namespace {
#ns > .twitter;
}
Then run less style.less > style.css
Here is how I did it, based on majgis's github fork above:
bootstrap-ns.less:
#import "namespace.less"
.bs {
#ns > .twitter;
}
namespace.less:
#ns {
.twitter(){
#import "bootstrap.less";
}
}
You then reference bootstrap-ns.less in your html page. This was tested with dotLESS.
if you have control over the compilation parameters just set strictImports to false and work as you intended to everything should be fine. consider looking at less-strictimports or at this issue.
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)