How to set the path to compile my CSS with Compass SASS


Tags: css,sass,compass-sass

Problem :

I have been looking around and it seems an issue quite diffused, but i am not finding the solution for my case.

I have set up my first Compass Project following these instructions

My folder project is called sass-test

I have my css files

  • screen.css
  • print.css
  • ie.css
  • config.rb

My config.rb inside is set up in this way

http_path = "/"
css_dir = "stylesheet"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

Then I have my sass folder with:

  • screen.scss
  • print.scss
  • ie.scss

I do some changes in my screen.scss file and then i compile it by the terminal giving this command

compass compile sass-test/sass/screen.scss

Now it happens that the automatically COMPASS generates new folders

  • stylesheet
  • test
  • sass .In this folder Compass compiles screen.css

I dont want my screen.css compiled there but i want it inside my sass-test where there is already existing the screen.css file.

How can i achieve that? I also look up in this article reading all the comments but i can not figure it out the issue.

I have also tried to compile it by liveReload preprocessor setting up the Outputfolder but it's still compiling the screen.css in the "wrong" path.

how can i give the instructions to Compass to compile my screen.css file in my sass-test?

Here the print screenenter image description here

Thanks



Solution :

Ok i have sorted it out the issue, i start from the beginning calling the project differently ( without any hyphen) then i set up the output folder by LiveReload preprocessor and anytime i edit any scss file, it compiles straight to the relative css file inside the stylesheet folder. In this way i do not use any command line


    CSS Howto..

    Apple's Website - How Does It Autosize Itself For Mobile Devices?

    How to get rid of white space between css horizontal list items? [duplicate]

    How to wrap image around the long text?

    div content shows when display:none

    How do I align these pictures vertically?

    How To Pick Desired Image From CSS Sprites In A DIV Background And Position It?

    Hover img to show an absolutely positioned div isn't working

    how to dynamically append tr element with css to a table

    How to position bottom of div above top of its container

    How to make image override parent width and stretch to browser width?

    How To Wrap A Div When Parent Container Shrinks Using CSS

    How To Outline a PNG (Transparent) image with CSS?

    How to apply CSS to navigation bar with master pages?

    How to indicate there is more text to scroll?

    How to get anchor tag on background image of div?

    How to Create 3 Column Layout with CSS Only?

    how to change the background of a css-class by hover a button?

    version control: how to control css and js compressed/minified versions between environments

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    How table-cell width with percentage value works?

    How to avoid using JavaScript with CSS attribute selector

    How can i make infinite flowing background with only CSS?

    how to set the background color of the whole page in css

    How do i center the navigation menu and logo men using float?

    How to make a titled box with css?

    how i can change the CSS class on click of an element [closed]

    CSS: How do I prevent the background color of div from going behind the image it is sitting above?

    How to keep width of the main container to maximum width in a 3 column fluid layout?

    How to create Chrome DevTool style bar charts with grids using plain CSS/HTML?

    how to add css to selected row in treegrid GXT 3