Does anyone know how can I convert this code to standard css? It's not working in their editor.
Asked
Active
Viewed 2.2e+01k times
6 Answers
92
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.
-
11
-
3You know have to click the 'View Compiled' button near the top of the CSS tab. – Jeremy C. Aug 11 '15 at 13:29
-
4At the time of writing there is a "caret" at the right hand corner of the css tab which does the job. a dropdown will appear from there select "view compiled CSS". – neophyte Jun 02 '17 at 08:18
-
In 2020, you can click down-arrow icon to the top right corner of css panel, open a drop-down menu, choose, 'view compiled css'. You can toggle back by choose 'view uncompiled css' – hoogw Jul 01 '20 at 14:53
89
In terminal run this command in the folder where the systlesheets are:
sass --watch style.scss:style.css
Source:
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.
cimmanon
- 67,211
- 17
- 165
- 171
joshuahornby10
- 4,222
- 8
- 36
- 52
-
1I'm on Windows7. Where do I find the terminal? Isn't it a Linux thing? As you can see I know nothing about sass and terminals. – Barbara Nov 30 '12 at 16:58
-
1Use the cmd, click run then cmd. follow the instructions on there website about setting scss up. You can then save the file you want on your machine and turn it into a .css – joshuahornby10 Nov 30 '12 at 16:59
-
Oh I see, thanks. I was hoping for something like an online converter. This is probably the only time I will ever use sass so I'm not really looking to install stuff. Thanks for the help, though. – Barbara Nov 30 '12 at 17:03
-
Sass Error: Undefined mixin 'backface-visibility' and Sass Error: Inconsistent indentation: 5 spaces were used for indentation, but the rest of the document was indented using 2 spaces. Strange they are the same errors I got from here http://cssconvert.mgwebsolutions.net/ – Barbara Nov 30 '12 at 17:07
-
Ok. My best bet would be to look at this, ohttps://www.google.co.uk/search?q=online+scss+compiler&oq=online+scss+compiler&aqs=chrome.0.57j60l2.467&sugexp=chrome,mod=7&sourceid=chrome&ie=UTF-8 there seems to be a few converts you have to download though. Best of luck. – joshuahornby10 Nov 30 '12 at 17:09
-
Codepen seems to converting it, so why not just grab the compiled css from the developers console in your browser? – steveax Nov 30 '12 at 18:23
11
This is an online/offline solution and very easy to convert. SCSS to CSS converter
0xdw
- 3,755
- 2
- 25
- 40
7
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.
Rahi.Shah
- 1,305
- 11
- 20
1
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;
Sagar Jadhav
- 1,111
- 11
- 10