Converts scss to css [closed] - css

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Does anyone know how can I convert this code to standard css?
It's not working in their editor.
http://codepen.io/andymcfee/pen/eyahr

If you click on the title CSS (SCSS) in CodePen (don't change the pre-processor with the gear) it will switch to the compiled CSS view.

In terminal run this command in the folder where the systlesheets are:
sass --watch style.scss:style.css
Source:
http://sass-lang.com/
When ever it notices a change in the .scss file it will update your .css
This only works when your .scss is on your local machine. Try copying the code to a file and running it locally.

This is an online/offline solution and very easy to convert.
SCSS to CSS converter

First of all, you have to install Ruby if it is not on your machine.
1.Open a terminal window.
2.Run the command which ruby.
If you see a path such as /usr/bin/ruby, Ruby is installed. If you don't see any response or get an error message, Ruby is not installed.
To verify that you have a current version of Ruby,
run the command ruby -v.
If ruby is not installed on your machine then
sudo apt-get install ruby2.0
sudo apt-get install ruby2.0-dev
sudo update-alternatives --install /usr/bin/gem gem /usr/bin/gem2.0 1
After then install Sass gem by running this command
sudo gem install sass --no-user-install
Then copy or add any .sass file and go to that file path and then
sass --watch style.scss:style.css
When ever it notices a change in the .scss file it will update your .css
This only works when your .scss is on your local machine. Try copying the code to a file and running it locally.

You can use sass /sassFile.scss /cssFile.css
Attention: Before using sass command you must install ruby and then install sass.
For installing sass, after ruby installation type gem install sass in your Terminal
Hint: sass compile SCSS files

Install Ruby-sass using below command
sudo apt-get -y update
sudo apt-get -y install ruby-full
sudo apt install ruby-sass
gem install bundler
Example
sass SCSS_FILE_PATH:CSS_FILE_PATH;
e.g sass mda/at-md-black.scss:css/at-md-black.css;

Related

Is there a way to install a rubygem manually without accessing rubygems.org?

So i have this IPv6 thingy issue where i can't access rubygems and connection times out before it gets to use IPv4. One way or another i managed to install rubygems and when i type -v it all checks out. Now i need Jekyll and Jekyll-paginate-v2. I tried gem install jekyll and it didn't work for reasons stated above. Strangely enough i was able to install Jekyll via sudo apt install jekyll. Tried that with jekyll-paginate-v2 but there's no such option. So is there any way to install it without using gem command?
ok so i found a way of solving this issue.
to install a gem you need a .gem file and since you can't access rubygems.org we will get it from github. just go to your gem's github page, download it and then open bash in that directory, type gem build gemname.gemspec and it will create a .gem file in this directory. after that just use gem install --local gemname.gem and that's it.

compass cannot compile completely using compass v0.12.6+sass v3.3.1? [duplicate]

I have just upgraded to Sass 3.3 so that I can use some of the new features (BEM styled class names, mappings, #at-root, etc). If I compile my project with Sass (via sass --watch), it works just fine. However, if I compile it using Compass (via compass watch), I get an error when using the new Sass features.
I'm using Compass 0.12.
Compass 0.12 explicitly depends on Sass 3.2. Even if you have a newer version of Sass installed, it will still compile with 3.2. In order to use Sass 3.3 or later, you have to be using Compass 1.0 or later.
Running the gem install command normally should get you the latest stable version.
gem install compass
At the time this question was asked, Compass 1.0 was still in beta. To install the latest beta version of a gem, you will need to install it using the --pre flag.
gem install compass --pre
Note that you do not need to install Sass first in order for this to work. Installing Compass will automatically install the latest version of Sass that it is compatible with.
I have Compass 1.0 installed and it still errors
Double check any other dependencies you might have (Compass extensions, etc.), one of them might be specifying an older version of Sass or Compass.
If you're using an application or build tool rather than using the commands directly, make sure they're not referencing older versions of Compass.
Windows users
As a Window user, I got an error when I tried to watch my project using the newer Compass.
LoadError on line ["36"] of C: cannot load such file -- wdm"
To fix that problem:
You must install the ruby DevKit:
Download found here: http://rubyinstaller.org/downloads/
Follow this page to properly install:
https://github.com/oneclick/rubyinstaller/wiki/Development-Kit
Now install wdm:
gem install wdm
There didn't seem to be any one place that contained the whole list of steps required, in order, to make this work, so here they are. This list is for Windows, but it may work fine on other platforms.
Install Ruby -- use 1.9.3 -- http://rubyinstaller.org/downloads .
Download the Ruby DevKit found lower on the same page -- http://rubyinstaller.org/downloads/
run it to extract it somewhere (permanent). Then cd to it, run “ruby dk.rb init” and “ruby dk.rb install” to bind it to ruby installations in your path.
gem install wdm
gem install sass
gem install compass --pre
It now is, in the latest version of Compass. Update compass to get the changes and work with Sass 3.3 and higher
Current Sass compatibility can be found here: https://rubygems.org/gems/compass
To upgrade just run
$gem install compass

SASS error: can't import Compass

I've been using sass and compass on this computer for a few months with no issues.
Additionally, my config.rb and sass directories have always been set up the same way, and they're the same on all of my projects.
Recently, I started getting this error in Sublime when I build the sass: Sass::SyntaxError: File to import not found or unreadable: compass.
The first line of my .scss file is #import "compass";, so I see this error in Terminal: error sass/style.scss (Line 36 of _vertical_rhythm.scss: Incompatible units: 'px' and 'em'.)
I've been searching for days, and I see answers around some of this stuff (the vertical-rhythm specifically), but nothing is my exact problem, and I can't find a solution.
My compass version is 0.12.5 (Alnilam), and my sass version is 3.3.4 (Maptastic Maple).
At work, everything compiles fine with the exact same files, working from the exact same GitHub repo. I need to check my versions of compass and sass at work tomorrow, but in the meantime, I'm stumped.
Any ideas? Has this happened to anyone?
After a month of troubleshooting, the solution ended up being simpler than expected.
I uninstalled all versions of both Sass and Compass, and then I installed the latest Compass and let it install Sass automatically.
So after doing sudo gem uninstall compass and sudo gem uninstall sass, I did sudo gem install compass. That installed both Compass and its dependencies (Sass version 3.2.19). (I'm on a Mac, so I had to use sudo.)
Solved!
if this is on mac:
Go to:
/var/folders/p_/w19t0k956zz_bg0bgs0cn6200000gn/T/liferay
and delete following folders:
document_preview document_thumbnail ruby

LESS css compiler help in terminal

Im using Ubuntu 13.04 (Linux)
I have installed node, and npm. With npm I downloaded less via terminal.
Im using this on my simple HTML/CSS project. pure frontend. its not a Ruby or nodejs project.
And when I do
lessc styles.less styles.css -x -w
in terminal, it compiles and compresses the code, but doesn't watch the file for changes, since Im expecting LESS to auto compile and refresh the page automatically. So, if I do any changes in my styles.less, every-time I have to go to terminal and enter the command to compile the less css.
Also, the compiler does NOT even show any compile errors even if I add anything on purpose, but in that case it doesn't compiles.
Please guide me on how to achieve the above. This is my first day with LESS CSS.
If you type lessc help you will see that there is no argument -w or --watch. What you can do is to use a build system like GruntJS with an extension like grunt-contrib-watch and have that monitor your less files and build the css on change.
I did this with help of #Oil on ubuntu forums.
In terminal,
1. install sudo apt-get install inotify-tools
then simply CD to the css folder.
and run below lines together:
while inotifywait -r styles.less; do
lessc -x styles.less styles.css;
done

How to know the path of Compass executable?

I am trying to use compass with Drupal 7, Basic theme and Compass module on my local hosting on Windows. It is already installed on my computer. Should i install it to my local webserver again, how can i know the path of existing Compass exutable?
Some more details would help get to the root of the problem:
Are you running compass from the command line, or using a GUI utility?
Did you install compass via gem install compass ?
What version of Windows are you running?
If you have properly installed ruby and compass, you should be able to cd into your drupal theme's directory and run compass watch to compile.
You can use the where command from the windows command prompt (where compass or, if that doesn't work where ruby) which will search your current directory and $PATH. If you cannot find compass, then you may need to reinstall compass/ruby.
Hope that helps!

Resources