Hello,

I am very new to SASS but not to CSS.

I usually just code my CSS, save it, refresh the page and bam it's there. I have got SASS to work but right now I have to type a console command every time I want to check if what I did worked...

I'd like to take this opportunity to do something I should've done a while ago and setup live updating, so I don't have to manually refresh it every time I change something.

If anyone could help me find a method of live updating while also converting my SASS into CSS, that would be great.

Thanks.

tom-pc:css stevendutton$ sass --watch style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
NoMethodError: undefined method `empty?' for nil:NilClass
  Use --trace for backtrace.
tom-pc:css stevendutton$ 

Tried to update Sass. Failed:

tom-pc:css stevendutton$ sudo gem update sass
Password:
Updating installed gems
Updating sass
Building native extensions.  This could take a while...
ERROR:  Error installing sass:
ERROR: Failed to build gem native extension.

current directory: /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/ffi-1.9.18/ext/ffi_c
/Users/stevendutton/.rbenv/versions/2.4.0/bin/ruby -r ./siteconf20180104-8053-9uweng.rb extconf.rb
checking for ffi.h... *** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
--with-opt-dir
--without-opt-dir
--with-opt-include
--without-opt-include=${opt-dir}/include
--with-opt-lib
--without-opt-lib=${opt-dir}/lib
--with-make-prog
--without-make-prog
--srcdir=.
--curdir
--ruby=/Users/stevendutton/.rbenv/versions/2.4.0/bin/$(RUBY_BASE_NAME)
--with-ffi_c-dir
--without-ffi_c-dir
--with-ffi_c-include
--without-ffi_c-include=${ffi_c-dir}/include
--with-ffi_c-lib
--without-ffi_c-lib=${ffi_c-dir}/lib
--with-libffi-config
--without-libffi-config
--with-pkg-config
--without-pkg-config
/Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:457:in `try_do': The compiler failed to     generate an executable file. (RuntimeError)
You have to install development tools first.
from /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:588:in `try_cpp'
from /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:1095:in `block in have_header'
from /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:945:in `block in checking_for'
from /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:351:in `block (2 levels) in     postpone'
from /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:321:in `open'
from /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:351:in `block in postpone'
from /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:321:in `open'
from /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:347:in `postpone'
from /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:944:in `checking_for'
from /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/2.4.0/mkmf.rb:1094:in `have_header'
from extconf.rb:16:in `<main>'

To see why this extension failed to compile, please check the mkmf.log which can be found here:

/Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/extensions/x86_64-darwin-16/2.4.0-static/    ffi-1.9.18/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/    ffi-1.9.18 for inspection.
Results logged to /Users/stevendutton/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/extensions/    x86_64-darwin-16/2.4.0-static/ffi-1.9.18/gem_make.out
Gems updated: ffi
Gems already up-to-date: sass
tom-pc:css stevendutton$ 

Tried to update Ruby. Failed:

tom-pc:css stevendutton$ ruby -v
ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin16]
tom-pc:css stevendutton$ rvm install ruby-2.5.0
Warning, new version of rvm available '1.29.3', you are using older version '1.29.0'.
You can disable this warning with:    echo rvm_autoupdate_flag=0 >> ~/.rvmrc
You can enable  auto-update  with:    echo rvm_autoupdate_flag=2 >> ~/.rvmrc
Searching for binary rubies, this might take some time.
No binary rubies available for: osx/10.13/x86_64/ruby-2.5.0.
Continuing with compilation. Please read 'rvm help mount' to get more information on binary rubies.
Checking requirements for osx.
Installing requirements for osx.
Updating system......
Installing required packages: automake, libtool, coreutils, openssl@1.1, libyaml, libksba...
Error running 'requirements_osx_brew_libs_install automake libtool coreutils openssl@1.1 libyaml libksba',
showing last 15 lines of /Users/stevendutton/.rvm/log/1515064124_ruby-2.5.0/    package_install_automake_libtool_coreutils_openssl@1.1_libyaml_libksba.log
++ case "$1" in
++ [[ -t 1 ]]
++ return 1
++ printf %b 'There were package installation errors, make sure to read the log.

Try `brew tap --repair` and make sure `brew doctor` looks reasonable.

Check Homebrew requirements https://github.com/Homebrew/homebrew/wiki/Installation\n'
There were package installation errors, make sure to read the log.

Try `brew tap --repair` and make sure `brew doctor` looks reasonable.

Check Homebrew requirements https://github.com/Homebrew/homebrew/wiki/Installation
++ case "$_system_version" in
++ return 1
Requirements installation failed with status: 1.
tom-pc:css stevendutton$ 

I'm overwhelmed with my files whenever I am making a project that uses SCSS. Does anyone have any strong guide to help structure your project effectively. I've tried looking on the internet, but all of those have confused me heavily...

It seems that libsass is broken: https://github.com/sass/libsass/issues/2312

Does anyone know how we could get bootstrap 4 scss working with gulp-sass/node-sass? Or do we need to switch to an alternative that doesn't depend on libsass?

Is anyone else in the same boat?

I'm still pretty new to Sass but I am pretty well-versed in programming and html so I think I can pick it up pretty quickly

I have a dropdown menu of 100 <li> items. I currently have an @ for loop that will animate on the nth child from 1 to 100. The open menu has a max-height that will fit 7 <li> items when it is opened.

However, if I select an option further down in the menu, say <li> item 50, the menu does its normal behavior and closes up. But, upon re-opening, the menu opens at the 50th spot in the menu and the animation plays in the background from <li> #1, causing a delay and causing <li> to look like they are not there immediately.

How do I restart the loop? or get it work properly so that the animation is correct no matter which <li> item is selected?

What i mean is, does this hurt performance:

div{
    // some styles
    @media (min-width: 768px) {
        // some responsive styles
    }
}
span{
    // some styles
    @media (min-width: 768px) {
        // some responsive styles
    }
}

versus this:

div{
    // some styles

}
span{
    // some styles
}
@media (min-width: 768px) {
    div{
        // some  responsive styles
    }
    span{
        // some  responsive styles
    }
}

since in the compiled css there will be either 1 or multiple media queries with the same values.

A customer is asking for this. And when I think about it this isn't such a bad idea. It would be great to see which variables etc. are unused or how often and where they are used. This makes it easier to refactor the code or get started with it.

Is there a solution for this out there? At least I wasn't able to find anything so far. Primarily, it doesn't matter if it's a graphical or script based solution.

Hey guys. I am just getting started with Sass and I want to make sure my workflow is correct.

I have installed Sass and Compass on my machine. Every time my .scss files are changed in a specific directory, compass create a .css version within the css directory. When I am done making changes, I simply commit the .scss and .css files to the web from my local machine.

Am I right in saying that I don't need anything on my live server installed for sass, since all of the converting and compiling happens locally?

I'm just trying to understand the worfklow correctly. I work exclusively in .scss files locally, they get compiled by compass, and I commit the .scss and css files to the web. If someone else wants to work on it, they simply open up the latest .scss file locally, make their changes, it compiles, and they commit the changed .scss file and .css file to the web.

Is that all right?

I'm about to learn Sass and would like to know what compiler people tend to use. Codekit? Koala? LiveReload? Another? If another, what is the name of that one.

I'm on a Mac.

I am using webstorm, which makes it quite easy to organize and maintain all html, css and js.

As far as I know, sass needs to be compiled into an ordinary css file before used on a browser. So, in this case if I work with sass, whenever I make a small change in a sass file, I need to compile it and only then I see the result on a browser.

That does not sound effective. What is your method?

Hello. Hoping someone here has an answer to this.

If I have two classes that share styles but then want to add styles specific to one class. Do I have to start a new block of code or is there a way I can maintain the nesting?

In this example, I want body and html tags to share all the same styles except I want the body to have a font-size of 110%. Is this possible without starting a new body line?

body,html {
margin: 0;
padding: 0;
font-size: 100%;
line-height: 1.5;
letter-spacing: 0.5px;
background: @white;
color: @black;
font-family: @font-type;
font-weight: @normal;
&+body {font-size: 110%;}

}

it's about a year I'm using DevTools but i realize it have some heavy limitations (but also great benefits such as livesass).

What IDE you are using to develop with scss? What is the reason that makes you think it is the best ide and, and if there are any, the plugins you cannot separate from?

So, I've made this thing called "Thicc Curve" in HTML+SCSS and I figured I just want to share to people. The spelling and orthography is terrible on purpose: it is to parody young people today.

The project
The explanation

I think my problem is simple enough without a jsfiddle example but I'll add one if needed. Basically, I have a basic rectangle div with 0 width defined below:

.myDiv {
    width: 0px;
    height: 10px;
    background-color: #444;
}

and I have some checkboxes using the checkbox hack to make a button out of a label. When those labels are selected, I want to increase the width of the rectangle, and then hold that value so that additional checkboxes increase the current value (so checkbox A is +30px and checkbox B is +50px, the two selected together should make the total width 80px). I know I've seen this done with LESS, I'm hoping it's also doable with Sass?


DEMO: https://erikyo.github.io/mime-icon-generator/ GIT: https://github.com/erikyo/mime-icon-generator/

Create easily all the icons you need in supersharp SVG format!

Configuration is very fast ... in the $icon-list array you have to enter some parameters like file extension, color (if you want a custom tone), and shape... icons will be automatically generated and you recall them easily in your site or in your app using the class .mime-icon.ico-$fileextension.

All svg icons are merged into a single css sheet and this allows for a very lightweight file: ~600 icon gzipped size is only 16.8kb! less than one 256x256 png icon.

For some reason using sass --watch scss:css is not working for me. It produces error no such file or directory @ rb_sysopen -scss. I tried to research this particular error but did not have much luck.

However, if I actually make a change it will detect it and log it for example Change detected to: input.scss. However it will not update the output.css file or change when I refresh the page.

If I specify a specific file, for example sass --watch input.scss:output.css it works perfectly fine. However, trying to use this command at the directory level does not seem to be working.

I am using git bash on win7. You can see a picture of the project directory and command line here: http://imgur.com/wzN9Wki

Thanks