I'm having trouble with codekit, the code below is correct and should work with sass 3.4.5 (selective steve) which is running with my codekit 2.1.6 - ive tested the code with sassMeister and have provided a link. Has anyone got an idea what is going on?
Codekit was setup as a compass project using the latest compass.
Codekit gives me:
Compass was unable to compile one or more files in the project:
error style.scss (Line 3 of _nav.scss: Invalid CSS after " &": expected "{", was "__list {"
"__list" may only be used at the beginning of a compound selector.)
identical style.css
http://sassmeister.com/gist/f07191a09789e354bae6
nav[role=navigation] {color: black;}
.nav {
&__list {
color: black;
&__item {
color: black;
}
}
&__link {
color: black;
&--active {
color: black;
}
}
}
should convert to
nav[role=navigation] {
color: black;
}
.nav__list {
color: black;
}
.nav__list__item {
color: black;
}
.nav__link {
color: black;
}
.nav__link--active {
color: black;
}
EDIT
if I go about in codekit its using SASS 3.4.5 and Compass 0.12.7 (which is the current) - ill try to installl a later version of compass
IF I RUN COMPASS WATCH ON THE DIRECTORY IT WORKS but Codekit doesnt..
EDIT
Codekit seems to be using an older version of Compass - even if I point it to my locally installed version.
EDIT
I believe that the version of compass codekit is using on my system is too old - 0.12.7 where it needs to run 1.0.1 - but I cant find out how to get it to switch
Codekit didnt seem to pick up the correct version of compass - no documentation, so I moved back to the terminal.
Related
I'm having trouble with sass variables. The browser is telling me i am using invalid property values and i can see the code editor is not picking up the variables i am using because it's not colorizing them.
I have uninstalled and reinstalled sass and gulp-sass but that didn't fix the problem and i'm out of ideas. I'm sure it's something really simple.
Key Facts
I am on windows 10
I installed sass using npm install sass
i installed gulp-sass using npm install gulp-sass
I am successfully compiling the .scss file into the .css file
i am currently trying to create the variables in an .scss file
This is my .scss file
$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;
body {
display: flx;
min-height: 100vh;
flex-direction: clm;
}
main {
flex: mpage;
}
.item-wrap{
justify-content: sb;
}
In order for Sass to read your variables, when you call them you have to hang the $ character in front of them, as you did when you declared them.
Example:
$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;
body {
display: $flx;
min-height: 100vh;
flex-direction: $clm;
}
main {
flex: $mpage;
}
.item-wrap{
justify-content: $sb;
}
I have the following code...
#use "#material/top-app-bar/_variables.import" as mdc;
.color{
background-color: lightblue;
height: mdc.$row-height;
}
But when I run I get...
Error: Expected digit.
src/components/header/index.style.scss 4:17 root stylesheet
I am guessing I am importing the Sass file incorrectly. I have tried...
#use "#material/top-app-bar/variables";
.color{
background-color: lightblue;
height: variables.$row-height;
}
#use "#material/top-app-bar/mdc-top-app-bar";
.color{
background-color: lightblue;
height: $mdc-top-app-bar-row-height;
}
Etc... but nothing I try is working. How do I import the variable using sass?
Update
I noticed this further up
[!] (plugin postcss) Error: Expected digit.
src/components/header/index.style.scss 9:29 root stylesheet
Could this be a Rollup plugin issue?
Update 2
Looks like part of the problem was installing the node-sass package. Now I get...
[!] (plugin postcss) Error: Invalid CSS after "...ight: variables": expected expression (e.g. 1px, bold), was ".$row-height;"
When I run the following...
#use "#material/top-app-bar/variables" as variables;
.color{
background-color: lightblue;
height: variables.$row-height;
}
I also tried the simpler
// ./_variables.scss
$row-height: 64px !default;
#use "./variables";
.color{
background-color: lightblue;
height: variables.$row-height;
}
And I still get the same thing.
I had a similar issue using the sass color module.
I had to add the following to my rollup.config.js
import sassPlugin from 'rollup-plugin-sass'
import sass from 'sass'
sassPlugin({
runtime: sass,
// Other properties omitted for brevity.
})
I want to, in Dart project, use Sass (for some nesting and file concatenation) and then apply autoprefixer to the result CSS.
In pubspec.yaml I do have those dependencies and transformers. TL;DR I am trying to use sass_builder (which works just fine on it's own; https://pub.dartlang.org/packages/sass_builder) and postcss_transformer (https://pub.dartlang.org/packages/postcss_transformer):
dependencies:
dev_dependencies:
browser: '>=0.10.0 <0.11.0'
dart_to_js_script_rewriter: '^1.0.1'
postcss_transformer: '^0.1.1'
sass_builder: '^1.1.2'
transformers:
- dart_to_js_script_rewriter
- sass_builder
- postcss_transformer:
arguments:
- use: autoprefixer
- autoprefixer.browsers: '> 1%'
However even if the usage of the transformers is, at least I believe, good, it just cannot cooperate OK:
"C:\Program Files\Dart\dart-sdk\bin\pub.bat" serve web --port=62806
Loading source assets...
Loading dart_to_js_script_rewriter, sass_builder and postcss_transformer transformers...
Serving klubFITpp_titani web on http://localhost:62806
[web] GET Served 4 assets.
[Info from Dart2JS]:
Compiling klubFITpp_titani|web/main.dart...
Build error:
Transform Postcss on klubFITpp_titani|web/style/alfa.css threw error: Systém nemůže nalézt uvedený soubor.
Command: postcss --use autoprefixer --autoprefixer.browsers "> 1%"
package:postcss_transformer/postcss_transformer.dart 65 PostcssTransformer.apply
===== asynchronous gap ===========================
package:$pub/serialize/transformer.dart 31 _serializeTransformer.<fn>.<fn>.<fn>
dart:async/future.dart 206 new Future.sync
package:$pub/serialize/transformer.dart 30 _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150 respond.<fn>
dart:async/future.dart 206 new Future.sync
package:$pub/serialize.dart 150 respond
package:$pub/serialize/transformer.dart 17 _serializeTransformer.<fn>
dart:async/zone.dart 1307 _RootZone.runUnaryGuarded
dart:async/stream_impl.dart 330 _BufferingStreamSubscription._sendData
dart:async/stream_impl.dart 257 _BufferingStreamSubscription._add
dart:async/stream_controller.dart 796 _StreamController&&_SyncStreamControllerDispatch._sendData
dart:async/stream_controller.dart 667 _StreamController._add
dart:async/stream_controller.dart 613 _StreamController.add
dart:isolate-patch/isolate_patch.dart 151 _RawReceivePortImpl._handleMessage
package:postcss_transformer/postcss_transformer.dart 65 PostcssTransformer.apply
===== asynchronous gap ===========================
package:$pub/serialize/transformer.dart 31 _serializeTransformer.<fn>.<fn>.<fn>
dart:async new Future.sync
package:$pub/serialize/transformer.dart 30 _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150 respond.<fn>
dart:async new Future.sync
package:$pub/serialize.dart 150 respond
package:$pub/serialize/transformer.dart 17 _serializeTransformer.<fn>
[web] GET style/alfa.css => Could not find asset klubFITpp_titani|web/style/alfa.css.
[Info from Dart2JS]:
Took 0:00:04.000418 to compile klubFITpp_titani|web/main.dart.
Build completed with 1 errors.
I am seeking for the solution on how to connect those two transformers or what to use to run Autoprefixer properly. I am also fine with instaling postcss etc. using node, which I now for the postcss_transformer transformer. It would be best if it would work using pub build / pub watch, eg. using some Dart transformer or so.
I use Windows 10. postcss works ok in a command line.
So I got this to work, but I'm not sure what exactly in your configuration isn't working. What I had to get this to work:
a) postcss command needs to work along with having the autoprefixer. I used this command to install:
npm install -g postcss-cli autoprefixer
b) Then I tested the on the command line to ensure it worked.
I used your pubspec.yaml exactly.
The web/index.scss I used was:
$primary-color: #333;
body {
color: $primary-color;
}
a {
color: blue;
}
.grid {
grid-gap: 10px;
}
.one {
grid-column: 1/3;
grid-row: 1;
}
.example {
display: grid;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
The output was:
body {
color: #333;
}
a {
color: blue;
}
.grid {
grid-gap: 10px;
}
.one {
grid-column: 1/3;
grid-row: 1;
}
.example {
display: grid;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: linear-gradient(to bottom, white, black);
}
/*# sourceMappingURL=*/
This was on a mac. So the configuration is possible. Hopefully this helps some.
Just a note that in the new build_runner system this won't work as is as it overwrites a file which is not allowed in the new system. One could fix this by specifying different output extensions instead of using the same input extension.
I am getting NameError - uninitialized constant Sass::Engine: when I run my sinatra app with sass gem.
installed ruby version 2.3.1 with rbenv and also installed sinatra, sass gem.
require 'sinatra'
require 'slim'
require 'sass' # required sass
require 'sinatra/reloader' if development?
get '/styles.css' do
scss :styles #does not generate styles.css, styles.scss file is in /views folder
end
get '/' do
slim :home
end
get '/about' do
#title = "All About This Website"
slim :about
end
get '/contact' do
slim :contact #, :layout => :special
end
not_found do
slim :not_found
end
get '/fake_error' do
status 500
"There's nothing wrong, really :P"
end
Full error:
NameError - uninitialized constant Sass::Engine:
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt/sass.rb:13:in
prepare'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt/template.rb:92:in
initialize'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:862:in
new'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:862:in
block in compile_template'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt.rb:104:in
block in fetch'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt.rb:103:in
fetch'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/tilt-2.0.5/lib/tilt.rb:103:in
fetch'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:841:in
compile_template'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:822:in
render'
/home/tasqyn/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sinatra-1.4.7/lib/sinatra/base.rb:687:in
scss' main.rb:7:in `block in '
What I am doing wrong?
and here is styles.scss:
$red: #903;
$black: #444;
$white: #fff;
$main-font: Helvetica, Arial, sans-serif;
body {
font-family: $main-font;
}
h1 {
color: $red;
font: 32px/1 $main-font;
}
header h1 {
font-size: 40px;
line-height: 80px;
background: transparent url(/images/logo.png) 0 0 no-repeat;
padding-left: 84px;
}
#mixin tabs ($background: blue, $color: yellow) {
ul {
list-style: none;
margin: 0;
padding: 0;
background: $background;
overflow: hidden;
}
li {
float: left;
}
a {
text-decoration: none;
display: block;
padding: 8px;
background: $background;
color: $color;
&:hover {
background: darken($background, 20%);
}
}
}
nav {
##include tabs($background: $black, $color: $white);
font-weight: bold;
}
p {
font: 13px/1.4 $main-font;
}
Perform below steps :
Add any of this gem into your gem file gem 'bootstrap-sass' or gem 'sass-rails'
Then install bundle using bundle OR bundle install command
Make sure you have in your gemfile:
gem 'sass'
gem 'sass-rails'
If not, add it. Don't forget to run bundle install.
If you are using the asset-pipeline with sinatra, then this might help. For those using rails this could help.
In my scenario, (running rails 3.2.22.2) on one machine my app worked.
On another machine I cloned the repo and ran into the uninitialized constant Sass::Engine error.
Moving gem sass-rails did not work for me
I moved gem 'sass-rails' out of the group :assets do block.
This did not work for me.
Solution for me:
rake assets:clean removes all compiled assets.
Next time you run rake rails s, your assets will be recompiled.
If not, you can run rake assets:precompile to compile all your assets.
Or if you are deploying via capistrano, the deploy.rb will run "deploy:assets:precompile" and compile assets for your production/staging machine.
The error seems to occur because sass is not being compiled in the asset pipeline correctly. (Would love to know why this occurs if anyone has the answer)
I'm having trouble with SASS. Locally I have this selector:
#featured-categories{
ul{
li{
width: 33.33%;
}
}
}
which works as expected. Deployed (and compressed) however this is compiling to:
#featured-categoriesulli{width: 33.33%;}
which of course is an invalid selector. The more straight more forward formulation:
#featured-categories ul li{
width: 33.33%;
}
behaves in the same way - i.e. compiles to something munged and broken.
The only way I can get this to compile is to add redundant rules between the elements of the selector:
#featured-categories{
margin: 0;
ul{
margin: 0;
li{
width: 33.33%;
}
}
}
This works, but is obviously not ideal.
Can anyone help? I'm in a ruby 1.9.3 project running sass 3.2.9. Any pointers would be greatly appreciated.
The SCSS that you've provided should work fine. Check it out with SassMeister or http://jsfiddle.net/Kjanu/. It will compile to this:
#featured-categories ul li { width: 33.33%; }
So you've got something else going wrong in your setup.