3/8/2023 0 Comments Prepros sass compassWhen you’ve started “watching” your file for changes, just throw some Sass into your. It looks like the log is just mimicking what the command-line would be spitting out. Although the log says “Press Ctrl-C to Stop”, this doesn’t seem to work in Scout. To go back to the configuration options, click the “configure” button near the top-right corner to return to the options screen. Watching a File For Changesįinally, to get things ready for our CSS file to be output, just click the “play” button next to the project you’re working on, and Scout will automatically start “polling for changes” and it will switch over to the “log” view to show you what’s happening:Īfter you press the “play” button, it turns to a “stop” button, allowing you to stop watching the file any time. As when using Sass on the command prompt, Scout will automatically create the output file for you. You don’t have to create a blank corresponding “.css” file if you don’t want to. Just create a text file and change the file extension to “.scss” or use an existing CSS file and change its extension to “.scss”. Once you’ve selected the input and output folders, and chosen the output options, now you need to create your Sass file. I won’t explain what each of these options do, but they’re pretty straightforward and you can fiddle with them to see the differences in the different output styles. Generally you should always choose “Compressed” for the output, since you want your end-result code to be as minimal as possible. Then you can choose the style of output, which is one of “Nested”, “Expanded”, “Compact”, or “Compressed”. First, you can choose the “Environment”, which is either “Development” or “Production”. Lower down in the config options, we’re able to select the output mode for our CSS. The only two options here that are mandatory are the first two fields, which are where you choose the path to the folder for your project’s CSS file, along with an output folder (I’m using the same folder for both). Folders and Output Optionsīefore I explain what the “play” button is for, let’s look at the config options that help to set up an individual project: You also have a little VCR-style “play” button next to each project name. The selected project is highlighted in blue and each project has a full screen of configuration options. Notice a couple of things in addition to the projects listed in the left pane: In my example, I’ve added two different projects. Configuring a ProjectĪfter adding one or more project folders, you should see something like the following: Using this option, navigate to your project’s folder and add it to Scout. If you click that, this will pull up a native OS window to allow you to select a folder: The only option at this point is the little plus sign in the bottom-left corner. There’s no file menu, no apparent buttons. The Scout App InterfaceĪfter Scout is installed, the application will launch, and the super-minimalist interface will load.Īdmittedly, when I first saw the UI, I was puzzled as to what to do. I suppose that could vary from system to system, but I noticed it did take a little long considering it’s only a 17MB install file. For example, when you install it, you might see a delay on this screen during the installation wizard: Generally speaking, Scout is a bit of a slow app (more on that later). To install Scout, just download it and follow the installation instructions. Scout runs Sass and Compass in a self-contained Ruby environment, making it dead simple to get started with proprocessing. But with Scout, you don’t need to do any of that. Installing ScoutĪs the previous tutorial pointed out, if you install Sass via the command line, you’ll have to do it manually after you install Ruby. So here I’ll quickly cover that alternative - Scout App, a free Mac and Windows-based native app produced and maintained by developers at Mutually Human. At the end of that post I introduced an alternative to all the command-line based instructions. This is a follow-up post to my previous article, posted yesterday, that discussed how to get up and running with Sass on Windows. I may update this article in the future but for now you can use their GitHub repo or the main site for documentation. The info in this article is probably significantly out of date but still applies to the classic version. 30, 2016): Scout App has been updated to a new version and is now being maintained again.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |