I found a solution on how to resize column
.col5-unit {
#include grid-column(2.4); // (12/5 = 2.4)
}
However, I'm getting this error
[16:17:17] Starting 'styles'...
[16:17:17] gulp-inject 4 files into index.scss.
[16:17:17] [Sass] Error in plugin 'gulp-sass'
Message:
no mixin named grid-column
Backtrace:
src/app/main/main.scss:110
Details:
fileName: /home/ubuntu/testapp/src/app/main/main.scss
lineNumber: 110
[16:17:17] Finished 'styles' after 35 ms
I saw grid-column in the file grid.scss but I'm not sure where to properly put my scss code.
As #akarienta's request, here is how I got it working. Without the inclusion of this import code, it won't get fixed.
#import "bower_components/foundation/scss/foundation/components/tabs";
I added that line to my own _settings.scss
then I put the code below to another scss file. It should have worked in main.scss but wondering why I didn't. I'll have to retest. Anyways, everything is working great
.col5-unit {
#include grid-column(2.4); // (12/5 = 2.4)
}
Related
main.scss
#import "sass1";
#import "sass2";
sass1.scss
$white-color: white
sass2.scss
.body{ color: $white-color}
If I just compile one time like this, it works fine
node-sass main.scss main.css
But if I use the watcher like this, modify and save _sass2.css gives me error
node-sass --watch main.css main.css
{
"status": 1,
"file": "sass2.scss",
"line": 3,
"column": 11,
"message": "Undefined variable: \"$whites\".",
"formatted": "Error: Undefined variable: \"$whites\".\n on line 3 of sass2.scss\n>> color:$whites;\n ----------^\n"
}
I have tried to use "sass" instead of "node-sass" and it works, is it a bug of node-sass?
Finally, I figured out the problem is the file name of the partials.
We should name files with underscore prefix if we do not want it to generate its own css code.
Then the solution is to change
sass2.scss
to
_sass2.scss
. (Also change sass1.scss to _sass1.scss although it is not the problem of the error)
Questions:
I have a sass-to-json.css where the only think printed is the comment that exports from #include herman-export;. Do I need to manually un-comment that JSON and/or rename the file to have a json extension?
My .sassdocrc file:
dest: public/docs
theme: node_modules/sassdoc-theme-herman
verbose: true
herman:
sass:
sass.jsonfile: public/json/sass-to-json.css
Then my sass-to-json.scss file just has the two imports where herman code exists, and the export mixin. (I'm not sure if all of this is necessary, but the json compiles correctly)
#import "utilities";
#import "base/colors";
#include herman-export;
compiles to sass-to-json.css. I have tried removing the comment so it's valid json and renaming the file to .json. But I get the same result, which is that herman compiles the page without the swatches, and without errors:
/*! json-encode: {"colors": {"theme": {"shade": "#16161e", "tint": "#f0f0fb", "dark-grey": "#393946", "grey": "#7d8c9c", "white": "#fff", "black": "#000", "blue": "#0c55b7", "green": "#3fbb26", "yellow": "#e7b60a", "red": "#e71b46"}}} */
The relevant bits of my colors.scss file:
/// #group color
/// #colors theme
$theme: (
'shade': #16161e,
'tint': #f0f0fb,
'dark-grey': #393946
);
#include herman-add('colors', 'theme', $theme);
Your Sass (and usage of herman-add and herman-export) looks great! No need to mess with the contents of the generated sass-to-json.scss file; it's supposed to be a valid Sass comment, and Herman itself will take care of parsing it as valid JSON.
The docs are a bit unclear, but the relevant option here is jsonfile nested under the sass option, not sass.jsonfile. So for example:
dest: public/docs
theme: herman
verbose: true
herman:
sass:
jsonfile: public/json/sass-to-json.css
(Note that you can also just specify herman as the theme, and SassDoc will automatically look for node_modules/sassdoc-theme-herman.)
Error:
Running "autoprefixer:dist" (autoprefixer) task
File .tmp/styles/documentation.css created.
Warning: Can't parse CSS: Missing property value at line 66:21 in .tmp/styles/main.css Use --force to continue.
Line 66 points to the following code:
Source:
span {
#extent .md-body-1;
}
p {
#extent .md-body-1;
}
I can't extent a tag in scss? Or is a autoprefixer issue?
you need to use #extend not #extent
I am trying to use a mixin with a custom function. But I have always receive the same error.
error sass/app.scss (Line 58 of sass/_grid.scss: Undefined mixin 'responsive-columns'.)
My function is :
#mixin responsive-columns($suffix:''){
#for $i from 1 through $columns{
.col#{$suffix}-#{$i}{
width : $i / $columns*100%;}
}
I found out what was the problem. I think it is a stupid one.
First I have to add :
#import "compass"
in my scss file.
Then in my terminal I have to use
compass watch instead of sass --watch sass_folder:css_folder
My scss file is this:
#import "compass/typography/lists/bullets";
.view-content ul
+no-bullets
This gives me an error on the page:
Syntax error: Invalid css after " +no-bullets": expected "{", was ""
However, when the rule looks like this:
.view-content ul {
#include no-bullets;
}
then it's OK and bullets are gone.
But I like the shorthand notation, how to enable using it?
You're right, I found the related documentation.
I tried the following and it works.
Then, I tried your and it didn't work until I remove the trailing ; on the import instruction.
#import "compass/typography/lists/bullets"
.view-content ul
+no-bullets
The following works with Compass 0.12.2. Try removing the trailing ; on the import instruction.