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.
Related
Not sure what the best way to import is but '#import' is deprecated and #use should be used instead. I have a grid file that I want to include in style.scss .
_grid.scss
.main-content {
display:grid;
/* Set up grid stuff */
}
header{
grid-area: header;
}
I need to import into here.
style.scss
body{
/* More code here */
}
The final complied code should look like this:
.main-content {
display:grid;
/* Set up grid stuff */
}
header{
grid-area: header;
}
body{
/* More code here */
}
I know this is wrong, but this is what I have tried:
#use 'grid' as *;
$main-content
What about using a mixin?
_grid.scss
#mixin grid {
/* Wrap all the code here from _grid.scss */
.main-content {
display:grid;
/* Set up grid stuff */
}
header{
grid-area: header;
}
}
style.css
#use 'grid' as *;
#include $grid
body{
}
#use is really tricky at the moment ... a real big impact to the language.
(A) First of all you should check if you indeed use the most actual SASS version: DART SASS. HEAD UP: MOST actual compilers even in good maintained frameworks DO NOT YET!!! Here are information about how to find/install compiler with most actual version:
Solution with installing via NPM:
Is it better to use the Live Sass Compiler (VS Code extension) or to install and run Sass via npm? (+ tips how to change from node-sass to dart-sass)
If more comfortable with VS Code:
Live Sass Compiler - #use causes compilation error
(B) #use changes the structure how to write SASS code substantial.
What NOT works with #use is to import code right in the middle of the code like you can do with #import. So, if you need to do so you are right with your last code example using a mixin including code to the body tag. But you need to move the mixin to the body tag where you want to include the code:
//### > SASS _grid.scss
#mixin grid {
.main-content {
display:grid;
/* Set up grid stuff */
}
header{
grid-area: header;
}
}
//### > SASS main.scss
#use 'grid' as *;
body {
#include grid;
}
//### --> compiles to CSS
body .main-content {
display: grid;
/* Set up grid stuff */
}
body header {
grid-area: header;
}
But honestly there are very few scenarios when you need to nest your grid css into the body tag!
If you divide your SASS into partial files and do the output in a main file which only wraps all code together you are able to do use #use very similar to the common use of #import. Example:
//### > SASS PARTIAL _typography.scss
/* TYPOGRAPHY */
html {
font-family: sans-serif;
}
h1 {
font-size: 24px;
}
//### > SASS PARTIAL _structure.scss
/* STRUCTURE */
header{
padding: 10px 20px;
background: darkgray;
}
main {
padding: 20px 20px;
background: white;
}
footer {
padding: 20px 20px 80px 20px;
background: black;
}
//### > SASS PARTIAL _grid.scss
/* GRID HELPER CLASSES */
.grid-col_4 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
//### > SASS MAIN main.scss
// WRAP PARTIALS TOGETHER
// only '#use' files, no css code here
#use 'typography' as *;
#use 'structure' as *;
#use 'grid' as *;
//### --> compiles to CSS
/* TYPOGRAPHY */
html {
font-family: sans-serif;
}
h1 {
font-size: 24px;
}
/* STRUCTURE */
header {
padding: 10px 20px;
background: darkgray;
}
main {
padding: 20px 20px;
background: white;
}
footer {
padding: 20px 20px 80px 20px;
background: black;
}
/* GRID HELPER CLASSES */
.grid-col_4 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
HEAD UP:
Even that seems very similar to the use of #import there is a VERY BIG DIFFERENCE to #import.
If you use variables/mixins/functions you are not able to #import them to the main.scss as before first and they are ready to use by the next included files! With #use now YOU HAVE TO #use the files separatly in every partial file where you need the variables/mixins/function.
If you like you may have an additional look about how that works:
https://stackoverflow.com/a/66300336/9268485
But note: what sounds easy indeed is more complicated in practical use ... even when the projects and modules are bigger and more structured ...
Project configurations splinters to different configurations files and in some cases it additional seems to lead to code/variables repetitions if you need to include different modules with same variables settings ... in every case more code is needed. But up to now that seems to be the future ...
I ended up just using #import , I seriously doubt they would remove it in the next 3 years and break everyone's code everywhere
I'm trying to use the same colors again and again in my Angular test project. So, I made a constants.css where I declare my root constants which are all colors at the moment. However I'm stuck at trying to use them in my individual components' css files.
I tried to include constants.css at the html file and doesn't work. I tried both #import url("constants.css") and #import "constants.css".
constants.css
:root {
--primary-color: #2c3e50;
--secondary-color: #f1c40f;
--background-color: #ecf0f1;
--accent-color: #c0392b;
}
nav.component.css
#import url("../../../constants.css");
a.logo {
color: var(--secondary-color);
}
I expected my logo text to be yellow but it's just default black.
You've forget to declare your variable in your css file where you want to use global variable:
#value --secondary-color from "here should be your address";
a.logo {
color: var(--secondary-color);
}
Let me show an example:
shared.css:
:root {
--primary-color: #2c3e50;
--secondary-color: #f1c40f;
--background-color: #ecf0f1;
--accent-color: #c0392b;
}
and in main.css you should write #value --secondary-color like this
#value --secondary-color from "./shared.css";
.background {
background-color: var(--secondary-color);
}
And do not forget to include your css files:
<link href="shared.css" type="text/css" rel="stylesheet"/>
<link href="main.css" type="text/css" rel="stylesheet"/>
Do not forget that order of declaration of stylesheets does matter.
My problem has been the import not working at all because it's Angular thing. I have to import my constant into the main style.css and importing in individual css files doesn't work at all.
The right answer of this link is the answer.
Angular 6 - Less CSS' import is not working anymore
I'm struggling to find the variables to how you can change the colouring of the hollow buttons that foundation provides.
At the moment I have to override the styling by doing the below:
&.hollow {
border: 1px solid $clr-primary;
color: $clr-primary;
}
I like having to do most of my styling changes in the foundation settings file instead of taking this approach so I don't have to write more CSS than I need.
Is there a variable that I am missing that I can apply these stylings to in the foundation settings?
According the foundation wiki you find the variables here:
All Foundation projects include a settings file, named _settings.scss. If you're using the CLI to create a Foundation for Sites project, you can find the settings file under scss/ (basic template) or src/assets/scss/ (ZURB template). If you're installing the framework standalone using Bower or npm, there's a settings file included in those packages, which you can move into your own Sass files to work with.
— http://foundation.zurb.com/sites/docs/sass.html
Changing the color palette: http://foundation.zurb.com/sites/docs/global.html#changing-the-color-palette
Simply read-up on the ZURB Foundation SCSS Button MIXINS which are explained at the bottom of this page here >>
Here are a few SCSS examples:
div.pagenumber a.pagelink {
#include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:solid);
font-size: inherit;
padding: 0.5em;
margin: 0;
border-radius: $global-radius;
}
div.pagenumber a.pagelink:hover {
#include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:hollow);
text-decoration: none;
font-size: inherit;
padding: 0.5em;
margin: 0;
border-radius: $global-radius;
}
input.cancel {
#include breakpoint(small) {
#include button($expand:false, $background:$darkred, $background-hover:$crimson, $color:$white, $style:solid);
font-size: 0.85rem;
}
#include breakpoint(medium) {font-size: 0.95rem;}
#include breakpoint(large) {font-size: 1rem;}
}
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.
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.